目录
<li>标签
去掉<li>前面的项目符号（小圆点）
语法：
list-style : none;
圆角边框
在css3中，新增了圆角边框的样式，这样我们的盒子就可以变圆角了。
语法：
boder-radius:length;
radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
圆形的做法：
border-radius 数值是正方形直径的一半
boder-radius ：100px（正方形直径是200px）；
或者：
boder-radius：50%；
圆角矩形的话，设置为高度的一半。
简写属性：可以跟四个值，分别代表左上角、右上角、右下角、左下角。
分开写：boder-top-left-radius（左上角）、boder-top-right-radius（右上角）、boder-bottom-right-radius（右下角）、boder-left-bottom-radius（左下角）。
盒子阴影：
我们可以使用box-shadow属性为盒子添加阴影
语法：
box-shadow：h-shadow v-shadow blur spread color inset；
注意：
1.默认的是外阴影（outset） ，但是不可以写这个单词，否则导致阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列
文字阴影
我们可以使用text- shadow属性将阴影应用于文本
语法：
text-shadow：h-shadow v-shadow blur color；
css浮动
浮动（float）
传统网页布局的三种方式
网页布局的本质——用css来摆放盒子，把盒子摆放到相应位置。
css中提供了三种传统布局方式（简单说，就是盒子如何进行排序顺序）：
①普通流
②浮动
③定位
1.标准流：
就是标签按照规定好默认方式排列，标准流是最基本的布局方式。
<1>块级元素会独占一行，从上向下顺序排列。（例如div、hr、p、h1～h6、ul、ol、from、table）
<2>行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。（例如：span、a、i、em等）
为什么需要使用浮动？
有很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
浮动最经典的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
什么是浮动？
float属性用于创建浮动框，将其移动到一边，直到左边元或有边缘触及包含块或另一个浮动框的边缘。
语法：
选择器 {folat：属性值；}
浮动特点（重点）
加了浮动之后的元素，会具有很多特性：
1.浮动元素会脱离标准流（脱标），浮动的盒子不再保留原先的位置。
2.浮动的元素会一行内显示并且元素顶部对齐
（如果多个盒子都设置了浮动，则他们会按照属性值，一行内显示并且顶端对齐排列)
注意：浮动的元素是是相互贴靠在一起的，不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐） 浮动的盒子不会有外边距合并的问题
3.浮动的元素会具有行内块元素的特性
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
浮动布局注意点：
1.浮动和标准流的父盒子搭配（先用标准流的父元素）
2.一个元素浮动了。理论上其余的兄弟元素也要浮动（一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题）。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
清除浮动
由于父级盒子很多情况下，不方便给发高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
清除浮动的本质：
·清除浮动的本质是清除浮动元素造成的影响
·如果父盒子本身有高度，则不需要清除浮动
·清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
语法：
选择器 { clear : 属性值；}
我们的实际工作中，几乎只使用 clear：both；
清除浮动的策略：闭合浮动。
清除浮动的方法：
1.额外标签法也称为隔墙法，是w3c推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签，例如<dig style="clear:both"></div>,或者其他标签如<br/>等
优点：通俗易懂
缺点：添加许多无意义的标签，结构化较差
注意：新添加的空标签必须是块级元素
2.父级添加overflow属性
将其属性值设置为hidden、auto或scroll，单词本身的意为溢出隐藏
优点：代码简介
缺点：无法显示溢出的部分
3.父级添加after伪元素（把后门堵起来）
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
优点：没有增加标签
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易
4.父级添加双伪元素（把前、后门都堵起来）
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等
清除浮动总结：
网站书写准备工作：
采用结构与样式相分离思想
1.创建study目录文件夹（用于存放页面的所有内容）
2.用vscode打开这个文件夹
3.study目录内新建images文件夹，用于存放图片
4新建首页文件夹index.html
5.新建style.css样式文件，采用外链样式式
6.<link rel="stylesheet" href="style.css">
7.样式表写入清除内边距的样式，来检测样式表是否引入成功。
* {
margin：0；
padding：0；
}
css属性书写顺序：
1.布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写)
2.自身属性：width/height/margin/padding-border/background
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break
word
4.其他属性（css3）：content/cursor/border-radius/box-shadow/text-shadow/background:lineear-gradient...
例如：
页面布局整体思路：
1.确定页面的版心（可视区），测量可知
2.分析页面中的行模块，以及每个行模块中的列模块。其中的页面布局第一准则。
3.一行中的列模块经常浮动，先确定每个列的大小，之后确定列的位置，页面布局第二准则
4.制作html结构。我们还是遵循，现有结构，后有样式的准则
5.所以，先清楚布局结构，再写代码
导航栏：
实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法
1.li+a语义更清晰
2.如果直接使用a，搜索引擎容易辨别为有堆砌关键字嫌疑
注意：
1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示.
2.这个nav导航栏可以不给宽度，将来可以继续添加其余文字.
3.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度.
搜索框search
按钮button
按钮button默认有个边框需要我们手动去掉
border:0；
注意：
input表单元素和button都属于行内块元素，行内块元素之间默认会有缝隙
解决方法：加浮动，浮动的两个盒子是没有缝隙的.
1549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
