您的位置:首页 > 健康 > 养生 > 北京市市场监督管理局_南昌网站搭建_百度sem竞价托管_网络推广和信息流优化一样么

北京市市场监督管理局_南昌网站搭建_百度sem竞价托管_网络推广和信息流优化一样么

2024/12/23 3:45:26 来源:https://blog.csdn.net/2303_80857229/article/details/142676061  浏览:    关键词:北京市市场监督管理局_南昌网站搭建_百度sem竞价托管_网络推广和信息流优化一样么
北京市市场监督管理局_南昌网站搭建_百度sem竞价托管_网络推广和信息流优化一样么

免责声明:本文仅做分享~

 

目录

CSS引入方式

 选择器

盒子尺寸和背景色

文字控制属性

单行文字 垂直居中

字体族

font复合属性

文本对齐方式

文本修饰线

color 文字颜色

-----

复合选择器

伪类选择器

超链接伪类

CSS特性

继承性

层叠性

优先级

Emmet 写法

背景属性

背景图平铺方式

背景图缩放

背景图固定

背景复合属性

显示模式

块级元素

行内元素

行内块元素

-转换显示模式

-----

结构伪类选择器

:nth-child(公式)

伪元素选择器 

盒子模型

组成

边框线 

内边距

尺寸计算

外边距

外边距问题 – 合并现象

外边距问题 – 塌陷问题

行内元素 – 内外边距问题

清除默认样式

元素溢出

圆角

阴影

标准流

浮动

清除浮动

总结

flex布局

组成部分:

主轴对齐方式

侧轴对齐方式

修改主轴方向

弹性伸缩比

弹性盒子换行

行对齐方式


CSS引入方式

内部样式:CSS 代码写在 style 标签里面.

外部样式:CSS 代码写在单独的 CSS 文件中(.css) 在 HTML 使用 link 标签引入 .

<link rel="stylesheet" href="./my.css">

行内样式:配合 JavaScript 使用,CSS 写在标签的 style 属性值里.


 选择器

  选择器: <br>

  标签选择器: <br>

  类选择器: <br>   .

  ID选择器: <br>    #

  属性选择器: <br>  

  伪类选择器: <br>

  伪元素选择器: <br>

  通配符选择器: <br> <!-- 一般删除一些样式时使用 -->   *{}


盒子尺寸和背景色


文字控制属性

行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)。


单行文字 垂直居中

行高属性值等于盒子高度属性值.


字体族

属性名:font-family

属性值:字体名

font-family属性值可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次 查找.

font-family 属性最后设置一个字体族名,网页开发建议使用无衬线字体.


font复合属性

设置网页文字公共样式.

属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)

--字号和字体值必须书写.


文本对齐方式

 控制内容水平对齐方式 .   属性名:text-align

#divs3 {

  text-align: center;

}

text-align本质是控制内容的对齐方式,属性要设置给内容的父级


文本修饰线

text-decoration


color 文字颜色


-----

复合选择器

伪类选择器

伪类表示元素状态,选中元素的某个状态设置样式。

鼠标悬停状态:选择器:hover { CSS 属性 }


超链接伪类

如果要给超链接设置以上四个状态,需要按 LVHA 的顺序书写。


CSS特性

继承性 层叠性 优先级

  css三大特性:继承、层叠、优先级 <br>

  继承:子元素继承父元素的样式。 (文字控制属性。)

  层叠:同一元素的样式层叠,后面的样式覆盖前面的样式。 

  优先级(权重):!important > 内联样式 > 外部样式表 > 内部样式表 > 浏览器默认样式。

  id > class > 标签选择器 > 通配符选择器

继承性

继承性:子级默认继承父级的 文字控制属性

 如果标签有默认文字样式会继承失败。 例如:a 标签的颜色、标题的字体大小。

层叠性

特点: 相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性

不同的属性会叠加:不同的 CSS 属性都生效。

优先级

优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。


基础选择器:

规则:选择器优先级高的样式生效。

公式:

通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

(选中标签的范围越大,优先级越低)


复合选择器-叠加 :

叠加计算:如果是复合选择器,则需要权重叠加计算。

公式:(每一级之间不存在进位)

规则:

从左向右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较

!important 权重最高

继承权重最低


Emmet 写法

代码的简写方式,输入缩写 VS Code 会自动生成对应的代码。


背景属性

背景图默认有平铺(复制)效果。 bgi

背景图平铺方式

background-repeat(bgr)


背景图缩放

设置背景图大小          

background-size(bgz)

常用属性值: 关键字

cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见

contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白 百分比:根据盒子尺寸计算图片大小 数字 + 单位(例如:px)

(图片比例与盒子比例相同,使用 cover 或 contain 缩放背景图效果相同。)


背景图固定

背景不会随着元素的内容滚动。

background-attachment(bga)
fixed


背景复合属性

background(bg)

属性值:

背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定

(空格隔开各个属性值,不区分顺 序)


显示模式

显示模式:标签(元素)的显示方式。

作用:布局网页的时候,根据标签的显示模式选择合适的标签摆放内容。

块级元素

l 独占一行        div

l 宽度默认是父级的100%

l 添加宽高属性生效

行内元素

l 一行可以显示多个        span

l 设置宽高属性不生效

l 宽高尺寸由内容撑开

行内块元素

l 一行可以显示多个

l 设置宽高属性生效

l 宽高尺寸也可以由内容撑开


-转换显示模式


-----

结构伪类选择器

作用:根据元素的结构关系查找元素。

:nth-child(公式)

n=0 -->


伪元素选择器 

创建虚拟元素(伪元素),用来摆放装饰性的内容。

• 必须设置 content: ””属性,用来 设置伪元素的内容,如果没有内容,则引号留空即可

• 伪元素默认是行内显示模式

• 权重和标签选择器相同


盒子模型

组成

• 内容区域 – width & height

• 内边距 – padding(出现在内容与盒子边缘之间)

• 边框线 – border

• 外边距 – margin(出现在盒子外面)


边框线 

属性名:border(bd) 属性值:边框线粗细 线条样式 颜色(不区分顺序)

设置单方向边框线 :

属性名:border-方位名词(bd+方位名词首字母,例如,bdl)

属性值:边框线粗细 线条样式 颜色(不区分顺序)


内边距

设置 内容 与 盒子边缘 之间的距离。

padding / padding-方位名词


尺寸计算

 盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

l 结论:给盒子加 border / padding 会撑大盒子

l 解决:

l 手动做减法,减掉 border / padding 的尺寸

l 內减模式:box-sizing: border-box


外边距

 拉开两个盒子之间的距离.

margin

与 padding 属性值写法、含义相同.

版心居中 – 左右 margin 值 为 auto(盒子要有宽度


外边距问题 – 合并现象

场景:垂直排列的兄弟元素,上下 margin 会合并.

现象:取两个 margin 中的较大值生效.


外边距问题 – 塌陷问题

场景:父子级的标签,子级的添加  上外边距  会产生塌陷问题.

现象:导致父级一起向下移动.

解决方法:

• 取消子级margin,父级设置padding

• 父级设置 overflow: hidden

• 父级设置 border-top


行内元素 – 内外边距问题

场景:行内元素添加 margin 和 padding,无法改变元素垂直位置

解决方法:给行内元素添加 line-height 可以改变垂直位置


清除默认样式


元素溢出

控制溢出元素的内容的显示方式。

overflow


圆角

border-radius

正圆形状 -- 给正方形盒子设置圆角属性值为 宽高的一半 / 50%

胶囊形状 -- 给长方形盒子设置圆角属性值为 盒子高度的一半.


阴影

box-shadow : X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影


标准流

标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个.

div

span

浮动

让块元素水平排列。


清除浮动

场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱) 解决方法:清除浮动(清除浮动带来的影响)

方法一:额外标签法

• 在父元素内容的最后添加一个块级元素,设置 CSS 属性  clear: both

方法二:单伪元素法

方法三:双伪元素法(推荐)

方法四:overflow     --最简单.

• 父元素          添加 CSS 属性           overflow: hidden


总结

浮动属性 float,left 表示左浮动,right 表示右浮动

l特点

1.浮动后的盒子顶对齐

2.浮动后的盒子具备行内块特点

3.父级宽度不够,浮动的子级会换行

4.浮动后的盒子脱标

l清除浮动:子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果

推荐双伪元素法清除浮动。

l拓展:浮动本质作用是实现图文混排效果。


flex布局

--用的更多。

Flex 布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。


设置方式:给父元素设置 display: flex,子元素可以自动挤压或拉伸。

组成部分:

•弹性容器

•弹性盒子

•主轴:默认在水平方向

•侧轴 / 交叉轴:默认在垂直方向


--沿主轴方向排列。


主轴对齐方式

justify-content

 

      /* 各个间距都相等 */

      justify-content: space-evenly;


侧轴对齐方式

•align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)

•align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)

侧轴无高度 / stretch 


修改主轴方向

主轴默认在水平方向,侧轴默认在垂直方向。

属性名:flex-direction

主轴 ,侧轴


弹性伸缩比

作用:控制弹性盒子的主轴方向的尺寸。

属性名:flex

属性值:整数数字,表示占用父级剩余尺寸的份数。


弹性盒子换行

弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示。

flex-wrap

wrap:换行

nowrap:不换行(默认)


行对齐方式

align-content

 --该属性对单行弹性盒子模型无效。


版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com