选择器、pxcook软件、盒子模型
结构伪类选择器
定义：根据结构的元素关系来查找元素。
<title>Document</title><style>li:first-child{color:aqua ;}li:last-child{color: aqua;}li:nth-child(3){color: aqua;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>85</li><li>8</li><li>32</li><li>23</li><li>34</li><li>56</li></ul></body>
nth-child（公式）
默认n是从0开始的。
li:nth-child(2n){color: brown;}li:nth-child(2n+1){color: aqua;}li:nth-child(5n){color: black;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>85</li><li>8</li><li>32</li><li>23</li><li>34</li><li>56</li></ul></body>伪元素选择器
必须加content!
<title>Document</title><style>div{width: 300px;height: 300px;background-color: pink;}div::before{content: "老鼠";}div::after{content: "大米";}</style>
</head>
<body><div>爱</div>
</body>盒子模型
width、height、
padding、内边距
border、边框线：solid: 边框的样式，这里是实线。
magin外边距：出现在盒子外面，拉开两个盒子之间的距离。
padding、border：内容与盒子边缘之间。
盒子边框线：bd
<title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;/* border: 1px solid #000; *//* border: dashed;*/border: dotted;}</style>
</head>
<body><div>biaoqian </div>
</body>单边框线
border-top: 4px solid #111;border-bottom: 4px dashed #777;border-left: 4px dotted #456789;border-right: 4px solid #599898;盒子模型：内边距padding（多值属性）
盒子模型：尺寸计算
<style>div{width: 200px;height: 200px;background-color: pink;padding: 20px;/* 内减模式 ，加padding和border也不会增大盒子面积*/box-sizing: border-box;}</style>
</head>
<body><div>jhdjkasd</div>
</body>盒子模型外边距
版心居中
要求：必须设定盒子的宽度，如果没有宽度做不了自动算法。
<style>div{width: 1000px;height: 200px;background-color: pink;margin: auto;}</style>
</head>
<body><div>版新内容</div>清除标签默认样式
清楚li标签前面的圆点
在最开始会设置自动算法。
盒子模型——内容溢出
overflow: hidden：内容隐藏
overflow: auto：框框有滚动条，右下都有
overflow: scroll：框框有滚动条，右边才有
<style>div{width: 200px;height: 200px;background-color: pink;/* overflow: hidden;*//* overflow: auto; */overflow: scroll;}</style>
</head>外边距问题：合并和塌陷。
外边距合并现象
外边距塌陷问题
行内元素，内外边距
margin：边缘。
没有办法改变垂直方向的距离，如果非要改变加行高： line-height
<style>span{margin: 50px;padding: 20px;line-height: 100px;}</style>
</head>
<body><span>标签</span><span>标签</span>
盒子模型-圆角
radius：半径。
盒子有四个角，border-radius: 后面可以跟四个值。
<title>Document</title><style>div{background-color: pink;height: 200px;width: 200px;border-radius: 5px;}</style>
</head>
<body><div>sdas</div>
</body>
圆角取值：最大50%。超过50%就没有效果了。
盒子模型的阴影
div{height: 200px;width: 200px;margin: 20px auto;background-color: pink;box-shadow: 20px 10px 5px 1px rgb(0, 0, 0.8) inset;}
书写案例
