各种显示模式
块级元素
块级标签代表的有:div、p、h等
特性:元素默认占一整行,宽度默认是父元素的宽度,高度默认由内容撑开,可以设置宽高
行内元素
行内级标签代表的有:a、span等
特性:一行可以显示多个,默认的宽度和高度均由内容撑开,不可以设置宽高
行内块元素
行内块级标签代表的有:input、button、select、img等
特性:一行可以显示多个,可以设置宽高
元素模式转换
css选择器:{display:block } 转块 css选择器:{display:inline-block } 转行内块 css选择器:{display:inline } 转行内
盒子和文本的水平垂直居中
盒子水平 + 垂直居中
flex布局(最简单)
父元素开启flex定位,并使用justify-content
和align-items
.box-warpper { display: flex; justify-content: center; align-items: center; } 12345
absloute 绝对定位(含两种定位方式)
-
子绝父相 +
top | right
+transform
-
子绝父相 +
top | right | bottom | left
+margin:auto
.box-warpper { position: relative; } .box-warpper .box { position: absolute; /* 定位方式 1 */ top: 50%; left: 50%; transform: translate(-50%, -50%); /* 定位方式 2 */ right: 0; left: 0; top: 0; bottom: 0; margin: auto; /*必须有auto,否则不生效*/ }
栅格布局 grid
父元素加入栅格, 子元素margin: auto
.box-warpper { display: grid; } .box-warpper .box { /* margin: 0 auto; 水平居中*/ /* margin: auto 0; 垂直居中*/ margin: auto; /*水平+垂直居中*/ }
table-cell布局(不常用)
-
父元素必须设置宽高,不能用百分比。
-
父元素设置
table-cell
布局,文本水平居中,垂直居中 -
子元素设置
margin:auto
.box-warpper { width: 500px; height: 500px; display: table-cell; text-align: center; vertical-align: middle; } .box-warpper .box { margin: auto; }
盒子内文本水平 + 垂直居中
文本水平居中
让div中文字水平居中:text-align: center;
即可
文本垂直居中
单行文本垂直居中
如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可
.box{ height: 100px; line-height: 100px; } 1234
多行文本固定高度的居中
CSS中的确是有vertical-align
属性,但是它只对HTML元素中拥有valign特性的元素才生效,例如表格元的"td"、“th”、“caption"等,而像"div”、"span"这样的元素是没有valign特性的,因此使用vertical-align
对它们不起作用。
但是在CSS中还有一个display:table
,所以我们可以使用这个属性来让"div"模拟"table"就可以使用vertical-align了。
注意,display:table
和display:table-cell
的使用方法,前者必须设置在父元素上,后者必须设置在子元素上。
.box{ /* 子元素相关信息 */ width: 100%; height: 100%; background-color: red; /* 设置定位相关 */ display: table; span{ text-align: center; display: table-cell; vertical-align: middle; } }
清除浮动
加额外标签
(主要方法) 浮动元素后面加⼀个空标签,设置样式 clear:both;,左右两侧均不允许浮动元素
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度。
<style>/* 方法一: 浮动元素后⾯加⼀个空标签,设置样式 clear:both; */ .box { width:500px; height:500px; border:2px solid black; } .box-item { float:left; width:200px; height:200px; border:2px solid red; } .clear{ clear:both; } </style> <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> <div class="clear"></div> </div
定高法
给浮动元素的父元素设置高度大于或等于最高的浮动元素的高度,用于小板块,高度可以写死的部分
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
<style> /* 方法二:定⾼法 给浮动元素的⽗元素设置⾼度⼤于或等于最⾼的浮动元素的⾼度 */ .box { width:500px; height:500px; border:2px solid black; } .box-item { float:left; width:200px; height:200px; border:2px solid red; } </style> <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> </div>
父元素添加overflow:hidden
利用 overflow:hidden 清除浮动时,父元素里面不能有定位超出的元素,如果有,超出的部分会被隐藏。
原理:使用overflow:hidden时,浏览器会自动检查浮动区域的高度。
缺点:必须定义width或zoom:1,不能和position配合使用,因为内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
<style> /* 方法三: 给父级元素添加 overflow: hidden; */ .box { width:500px; border:2px solid black; overflow:hidden; } .box-item { float:left; width:200px; height:200px; border:2px solid red; } </style> <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> </div>
利用after伪元素清除浮动
<style> .box { width:500px; border:2px solid black; } .box-item { float:left; width:200px; height:200px; border:2px solid red; } .clearfix::after { /* 方法四:利⽤after伪元素清除浮动 */ content: ""; clear: both; display: block; } </style> <div class="box clearfix"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> </div>
注意: 项目中我们常⽤after伪元素清除浮动,因为它不会额外增加标签,⽽且不会出现因为⽤overflow:hidden超出的部分会被隐藏,⽗元素⾼度也不⽤写死,我们只要在⻚⾯写⼀次清浮动的代码,在需要清浮动的位置加上 clearfix 类名就可以了。
父级div定义overflow:auto
原理:同overflow:hidden,使用overflow:auto时,浏览器会自动检查浮动区域的高度。
<style> .box { width:500px; border:2px solid black; overflow:auto;/*:方法五. 父级div定义overflow:auto; */ } .box-item { float:left; width:200px; height:200px; border:2px solid red; } </style> <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> </div>
注意事项
●同级的元素,要么全部浮动,要么全部不浮动。
●⼦元素浮动,⽗元素去清除浮动,如果⽗元素也浮动,寻找距离最近的没有浮动的祖先元素去做清除浮动的操作。
●⽗元素有绝对定位的不需要清除浮动。
伪类选择器
(1) 动态伪类
-
:link 超链接未被访问的状态。
-
:visited 超链接访问过的状态。
-
:hover 鼠标悬停在元素上的状态。
-
:active 元素激活的状态。
-
注意点:遵循 LVHA的顺序,即:link、visited、hover、active.
-
:focus 获取焦点的元素。 表单类元素才能使用:focus 伪类。 当用户:点击元素、触摸元素、或通过键盘的“tab”键等方式,选择元素时,就是获得焦点。
(2) 结构伪类
-
:first-child所有兄弟元素中的第一个。
-
:last-child所有兄弟元素中的最后一个。
-
:nth-child(n)所有兄弟元素中的第n个。
-
:first-of-type所有同类型兄弟元素中的第一个。
-
:last-of-type所有同类型兄弟元素中的最后一个。
-
:nth-of-type(n)所有同类型兄弟元素中的第n个。`
关于n的值: 0或不写:什么都选不中--几乎不用,n:选中所有子元素--几乎不用。
2n 或 even:选中序号为偶数的子元素,2n+1或odd:选中序号为奇数的子元素。 了解即可:
-
:nth-last-child(n)所有兄弟元素中的倒数第n个。
-
:nth-last-of-type(n)所有同类型兄弟元素中的 倒数第n个。
-
:only-child 选择没有兄弟的元素(独生子女)。
-
:only-of-type选择没有同类型兄弟的元素。
-
:root根元素。
-
:empty 内容为空元素(空格也算内容)。
(3) 否定伪类
:not(选择器)
(4) UI伪类
-
:checked 被选中的复选框或单选按钮。(复选框的背景颜色不能变,不能用focus)
-
:enable 可用的表单元素(没有disabled属性).
-
:disabled 不可用的表单元素(有 disabled属性).。
伪元素选择器
作用:选中元素中的一些特殊位置。
常用伪元素:
-
::first-letter选中元素中的第一个文字。
-
::first-line选中元素中的第一行文字。
-
::selection 选中被鼠标选中的内容。
-
::placeholder选中输入框的提示文字。
-
::before 在元素最开始的位置,创建一个子元素(必须用content属性指定内容)。
-
::after 在元素最后的位置,创建一个子元素(必须用content属性指定内容)。
p::before { content: ""; }
上述两个选择器添加的元素是行内元素 ,如果要为其配置宽高 , 需将显示模式 display 转为块级元素 block 或行内块元素 inline-block。
权重 : 伪元素选择器 的权重 与 标签选择器权重相同 , 权重为 1 ;