首字缩进: text-indent：2em; ul去点： list-style:none;
圆角边框可以将边角进行润化
设置圆角边框: 两个参数：1，左上角和和右下角 2，右上角和左下角 border-radius：20px 40px； 实际使用中即8~10px将正方形变成原型： border-radius：50%；将正方形设置为院系可以将属性的值设置为50%,但是高于50%也没问题，但是会对计算机性能有影响。 在设置的时候，计算器会进行计算，当圆的直径超过正方形所能容纳的最大圆形的时候，会自动缩小至正方形的范围。所以写50%和100%或者更高都相同。准备： 标准文档流-就是一个概念，也称为普通流。实际上就是表示网页中标签内容是从上往下，从左往右的顺序进行解析的，比如说块级元素是独占一行或者多行，行内元素不独占一行，这些解析会按照一定的顺序要求进行解析，这个前提下不发生意外，就是标准文档流。 特征
默认情况下，网页时从上往下，从左往右的顺序解析会出现空白折叠，比如有多个空格，如果不设置 ；会被折叠图片，文字高度不等，但是底部是对其的行内元素和块级元素只有在标准文档流中才区分，如果脱离了文档流，那么就可以设置宽高。–重点自动换行—当默认页面宽度不足以显示的时候会自动换行浮动 其实就是脱离文档流，为了布局的设定。-所有元素只要是设定浮动，那么就是脱离文档流。 浮动只有左浮动和右浮动 语法：float：left/right；
如果多个盒子同时设置了浮动，就会产生一现象：被浮动的小盒子会自动对齐
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动特性-对齐</title> <!-- 如果多个盒子同时设置了浮动，就会产生一现象：被浮动的小盒子会自动对齐 --> <!-- 太过冗余 --> <!--<style type="text/css"> .one{ width: 100px; height: 100px; background-color: red; /*设置浮动*/ float: left; float: right; } .two{ width: 100px; height: 100px; background-color: yellow; /*设置浮动*/ float: left; float: right; } .three{ width: 100px; height: 100px; background-color: pink; /*设置浮动*/ float: left; float: right; } </style>--> <!--优化代码--> <style type="text/css"> div{ width: 100px; height: 100px; float: left; } /*分别设置颜色*/ .one{ background-color: red; } .two{ background-color: cyan; } .three{ background-color: forestgreen; } </style> </head> <body> <!--并列关系--> <div class="one"></div> <div class="two"></div> <div class="three"></div> </body> </html>额外标签法：在最后一个设置浮动的元素后添加一个空的标签（额外的），设置清除浮动的选择器， 优点：操作简单，直接 缺点：会产生冗余的空标签 - 可读性差，代码的结构混乱
清除浮动之后的父元素的高度以最高的那个子元素的高度为准。 <style> .father{ width: 300px; border: 1px solid red; } .big{ width: 100px; height: 100px; background-color: purple; float: left; } .small{ width: 80px; height: 80px; background-color: yellow; float: left; } .footer{ width: 400px; height: 100px; background-color: skyblue; } /*设置清除浮动的选择器*/ .clear{ /*对当前的以上元素清空浮动*/ clear: both; } </style> </head> <body> <!--嵌套关系--> <div class="father"> <div class="big"></div> <div class="small"></div> <!--1.添加一个空标签，比如div--> <div class="clear"></div> </div> <!--并列关系--> <div class="footer"></div> </body>在父元素上面设置overflow属性，谁影响布局，那么谁就设置这个属性 好处，不需要设置太多的空标签–不会影响代码的可读性 不足，使用的局限性太大，不能随时用 使用步骤
先搞清楚什么元素影响了布局在这个元素的上面设置overflow理解： 通常可以认为在设置浮动的元素的父元素上设置overflow：hidden； 一定要写在父元素中，如果设置了清除浮动，那么父元素的高度按照最高的子元素获取高度
利用伪元素选择器来设置清除浮动 好处：通用性非常好，几乎试用于所有的情况 要求：实际上是将两种清除方式做了一个组合，这样既不会出现太多冗余的标签，也可以使用广泛。 但是注意浏览器版本兼容性 - IE7和以下版本要注意，可能不支持
<style> .clearfix:after{ content:"";/*必须写*/ display:block;/*设置为块级元素*/ clear:both;/*兼容额外标签法*/ visibility:hidden;/*兼容overflow*/ } /*补充：兼容性问题 - 可以这么写*/ .clearfix{ *zoom: 1;/*是ie6浏览器以及以下版本的清除浮动的方式*/ } </style>网页布局：
布局流程： 把网页中的元素（文字，图像，视频，音频等等）看成是一个个的小盒子，放到网页（大盒子）中，然后利用css进行样式的设置，这样的过程就是布局排版 css中没有太多的逻辑，类似于搭积木，我们一般会遵循主流的布局。在做网站之前回去分析主流的网站构架版心： 其实就是一个可视区，是指网页中的主图内容所在的位置，最显眼的。比如说banner 可供选择的宽度：100px，1200px，1360px布局的步骤： 确定版心的位置（可视区） 分析页面的架构-行内元素和块级元素 制作html css样式处理介绍几种主流的（经典的）布局 一列固定宽度且居中 - 了解 两列左窄右宽型 - 小米官网，淘宝 通栏平均分布型 - 苹果，锤子官网仅搬运 1
只是笔记 ↩︎
