一、css选择器补充
1.链接伪类选择器
链接伪类选择器实际工作开发中的写法:
<!--a 是标签选择器 所有的链接-->
a {
color:red;
}
<!--:hover 是链接伪类选择器鼠标经过-->
a:hover {color:red;}
2.focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。 焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus {
background-color:yellow;}
3.结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个
.show table tbody tr:nth-child(2n+1) {
background-color: #f7f3fd;
}
注意:类选择器、属性选择器、伪类选择器，权重为10.
nth-child (n)选择某个父元素的一个或多个特定的子元素 区别:
（1）nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
（2）nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E 找第n个孩子
4.后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。
语法: 元素1 元素2{样式声明}
上述语法表示选择元素1里面的所有元素2(后代元素)。
例如: <!--ul里面所有的11标签元素-->
ul li {
list-style:none;
}
元素1和元素2中间用空格隔开
5.子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。
语法： 元素1>元素2{样式声明}
上述语法表示选择元素1里面的所有直接后代(子元素)元素
例如：
<!--选择 div里面所有最近一级p标签元素-->
div>p {
text-indent: 2em;
}
元素1和 元素2中间用大于号 隔开
二、盒子模型
1.盒子模型
盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的HTML元素，它包括:边框、外边距、内边距、和实际内容
2.边框
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色
语法: border : border-width ||border-style ||border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
边框样式border-style 可以设置如下值：
| 属性值 | 作用 |
|---|---|
| none | 没有边框即忽略所有边框的宽度(默认值) |
| solid | 边框为单实线(最为常用的) |
| dashed | 边框为虚线 |
边框简写:(没有顺序)
border: 1px solid red; border-top: 1px solid red;
边框案例
div {
width: 100px;
height: 100px;
background-color: pink;
border: 10px blue solid;
}
div {
border-top: 10px solid red;
}
3.内边距(padding)
padding 属性用于设置内边距，即边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
添加内边距后：
（1）边框和文字有距离
（2）padding影响了盒子实际大小。如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。 解决方案:如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
好处：让padding撑大盒子
4.外边距(margin )
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin简写方式代表的意义跟 padding 完全一致。 外边距可以让块级盒子水平居中，必须满足两个条件:盒子必须指定了宽度(width)，盒子左右的外边距都设置为auto 。
.header{ width:960px; margin:0 auto;}
常见的写法，以下三种都可以:
margin-left:auto;
margin-right: auto;
margin: auto; margin:0 auto;
注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可.
外边距合并: 使用margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况: (1)相邻块元素垂直外边距的合并 (2)嵌套块元素重直外边距的塌陷
5.清除内外边距
* {
padding:0;
margin:0;
}
综合案例：
6.圆角边框
在 CSS3中，新增了圆角边框样式，border-radius 属性用于设置元素的外边框圆角。
语法:
border-radius: length;
参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius
三.浮动
1.什么是浮动?
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:
选择器 { float:属性值；}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
2.浮动特性
（1）浮动元素会脱离标准流(脱标)，浮动的盒子不再保留原先的位置
（2）浮动的元素会一行内显示并且元素顶部对齐
（3）浮动的元素会具有行内块元素的特性
注意:浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
●如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
●浮动的盒子中间是没有缝隙的，是紧挨着一起的
效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
.box {
height: 615px;
width: 1226px;
background-color: aquamarine;
}
.left {
width: 234px;
height: 615px;
background-color: bisque;
float: left;
}
.right {
width: 992px;
height: 615px;
float: left;
}
.right>div {
width: 234px;
height: 300px;
background-color: azure;
float: left;
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
3.清除浮动语法:
选择器 { clear:属性值；}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
| right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
| both | 同时清除左右两侧浮动的影响 |
我们实际应用中，几乎只用clear: both; 清除浮动的策略是:闭合浮动.
方法：
（1）额外标签法也称为隔墙法，是W3C推荐的做法。
（2）父级添加 overflow 属性
（3）父级添加after伪元素
（4）父级添加双伪元素
四.定位
1.定位组成
定位:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
（1）定位模式：
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
（2）边偏移： 边偏移就是定位的盒子移动到最终位置。有top、bottom, left和 right 4个属性.
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
（3）小结：
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative 相对定位 | 否(占有位置) | 相对于自身位置移 | 常用 |
| absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
| fixed 固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段少 |
2.定位叠放次序z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)语法:
选择器 { z-index: 1: }
●数值可以是正整数。负整数或0,默认是auto，数值越大，盒子越靠上
●如果属性值相同，则按照书写顺序，后来居上数字后面不能加单位
●只有定位的盒子才有z-index属性 3.绝对定位的盒子居中 加了绝对定位的盒子不能通过margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中:
left:50%;:让盒子的左侧移动到父级元素的水平中心位置。
margin-left:-100px;:让盒子向左移动自身宽度的一半。
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
