从0开始css
1.圆角边框
- 圆角边框可以通过css的属性
border-radius：length来实现，其中的length为圆形与直角边相切半径 - 圆形盒子半径设为正方形一半即可，写 50%
- 圆角矩形设置为高度的50%
注意该属性为css3新增，可能有兼容性问题
<style>
/* 圆角矩形做法 */
div.demo1 {
width: 300px;
height: 150px;
background-color: pink;
/* 圆角 */
border-radius: 75px;
}
/* 圆形做法 */
div.demo2 {
width: 300px;
height: 300px;
background-color: pink;
/* border-radius: 150px; */
border-radius: 50%;
}
/* 不同圆角做法 */
div.demo3 {
width: 300px;
height: 300px;
background-color: pink;
/* border-radius: 150px; */
border-radius: 10px 20px;
}
</style>2.盒子阴影
- 1.默认outset但是不要写，否则失效。
- 2.盒子阴影不占用空间，不影响其他盒子排列
- 3.鼠标经过出现影子:hover做
该属性为css3新增
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
</style>3.文字阴影
<style>
div {
font-size: 50px;
color: orange;
font-weight: 700;
}
div:hover {
text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
}
</style>4.网页布局
- 网页布局准则：多个块级元素纵向排列找标准流，横向排列找浮动
- 传统网页布局的本质就是用css来摆放盒子
- css提供了三种传统布局方式，分别是
- 1.普通流（标准流）
- 2.浮动
- 3.定位
5.标准流
6.浮动
6.1浮动特性
- 浮动元素会脱离标准流（脱标），即脱离标准流的控制（浮）移动到指定位置（动）
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
- 浮动的盒子不再保留原来的位置
- 浮动的元素与定位不同，只会压住下面标准流动盒子，但是不会压住标准流盒子里的文字与图片（类似环绕效果）
- 浮动的盒子在同一行顶端对齐，相互贴靠没有缝隙。但是注意如果父盒子的宽度装不下浮动盒子，多动盒子会另起一行对齐
- 浮动的元素具有行内块元素的特性，不用再
display:inline-block,可以直接设置宽高。注意，块级盒子没有设置宽度时默认与父元素一样宽，但是添加浮动后大小根据浮动盒子的内容决定，这点与行内元素一样。
<style>
.box1 {
width: 200px;
height: 200px;
background-color: pink;
/* 脱标后位置被占有 */
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: blue;
}
</style>6.2浮动元素搭配标准流父级元素
- 为了约束元素的位置我们通常采用先用标准流的父元素排列上下位置，再在内部使用浮动进行左右位置的排列
6.3浮动布局的注意点
- 先用标准流父元素上下排列，再在内部进行子元素浮动左右排列
- 一个元素浮动了理论上其余兄弟元素也要浮动。所谓一浮全浮。
- 浮动的盒子只影响后面的标准流盒子，不会影响之前的。
6.4清除浮动
6.4.1为什么要清除浮动
由于父级盒子在很多情况下不方便设定高度，但是子盒子浮动不占有位置，导致父盒子会影响下面的标准流盒子。
6.4.2清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身设定了高度，就不需要清除浮动
- 清除浮动后，父级会根据浮动的子盒子自动监测高度，父级有了高度就不会影响下面的标准流盒子。
6.4.3清除浮动的方法
- 额外标签法
在浮动的元素末尾添加一个空标签。例如<div style="clear:both"></div>,或者其他标签（如<br/>）
- 优点：通俗易懂，书写方便
- 缺点：添加了许多无意义表情，结构化差
- 父级添加overflow
可以给父级添加overflow属性，属性值可以为hidden、auto或scroll
- 优点：代码简介
- 缺点：无法显示溢出的部分
父级:after伪元素法
:after方法是额外标签法的升级版，是给父元素添加。该写法结构简单，写法高级。.clearfix:after { content:""; display:block; height:0; clear:both; visibility:hidden; }父级双伪元素清除浮动
- 推荐使用该写法
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both }
注意IE6-7不支持after，会有兼容性问题（但是IE已经快消失了，所以问题不大）
7.定位
7.1什么时候需要用定位
浮动可以让多个块级盒子一行没有缝隙排列显示，常用于横向排列盒子。而定位是让盒子自由地在某个盒子内移动位置或者固定在屏幕的某个位置。
7.2定位的组成
定位=定位模式+边偏移
定位模式用于指定某个元素在文档中的定位方式。边偏移决定了该盒子的最终位置。
7.3 定位模式
7.3.1静态定位static（了解）
静态定位是元素的默认定位方式，无定位的意思。
- 静态定位按照标准流特性摆放位置，没有边偏移
- 静态定位在布局中很少用到
<!-- div位置是选择器，下文同 --> div { position:static; }
7.3.2相对定位relative（重要）
相对定位是元素在移动位置的时候，相对于它原来的位置来说的
- 相对定位移动位置时的参照点是自己
- 相对定位的盒子在标准流中的位置会继续占有，后面的盒子仍然以标准流的方式对待它（不会脱标）
- 因为不会脱标，所以可以用
margin：auto来进行水平居中对齐div { position:relative }
7.3.3绝对定位absolute（重要）
绝对定位是元素移动位置的时候，是相对于它的祖先元素来的。
- 如果没有祖先元素或者祖先元素没有定位，则该元素以浏览器为准定位
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点移动位置
- 绝对定位不再占有原来的位置（脱标）
div { position:absolute; top:50px; left:50px }
7.3.4固定定位fixed（重要）
固定定位是元素固定于浏览器可视区的位置。主要使用场景：浏览器页面滚动时元素位置不产生变化
- 固定定位以浏览器可视窗口为参照点移动元素，与父元素没有关系，不随滚动条滚动
- 固定定位也是脱标的，固定定位可以看作是一种特殊的绝对定位
div { position:fixed; }
7.3.5粘性定位stiky（了解）
粘性定位可以看作是相对定位于固定定位的结合
- 粘性定位以浏览器的可视窗口为参照点移动元素
- 粘性定位不脱标，占有原先的位置
- 必须添加至少一个偏移量才生效
div { position:sticky; top:10px; }
7.3.6边偏移
7.3.7子绝夫相是什么
子绝夫相的意思就是子级是绝对定位的话，父级要用相对定位
- 子盒子绝对定位不占位置，可以放到父盒子的任意地方，不会影响兄弟盒子
- 父盒子需要添加定位，限制子盒子在父盒子内显示
- 父盒子布局的时候需要占有位置，因此是相对定位
- 子绝父绝也会出现，但是父元素的父元素一定是相对定位
<!-- 采用less语法 --> .father { position:relative; .son { position:absolute; top:10px; } }
7.3.8定位叠放次序 z-index
使用定位布局的时候可能会出现盒子重叠的情况。此时可以使用z-index来控制盒子的前后次序
- 数值可以是正整数、负整数或0，数值越大盒子越靠上
- 属性值相同的话，后来居上，以后书写的为准
- 数字后面不可以加单位
- 只有定位的盒子才有z-index属性
.father { position:relative; .son1 { position:absolute; top:0; z-index:0; } .son2 { position:absolute; top:0; z-index:1; } <!-- 子盒子2会在1上面 --> }
7.4关于定位的其他
- 绝对定位的盒子水平居中
加了绝对定位的盒子不能通过margin:0 auto进行水平居中，但是可以通过以下的计算方法实现水平居中.son { position:absolute; <!-- 盒子左侧移动到父元素水平中心 --> left:50% <!-- 盒子水平向左移动自身50%宽度 --> transform:transitionX(-50%) } - 定位的特殊特性
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，如果不给宽度或高度默认大小是内容的大小
- 脱标的盒子不会触发外边距塌陷
- 浮动元素、绝对定位（固定定位）元素都不会出发外边距合并的问题
关于外边距塌陷的解释：
1.当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。
2.对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。
- 绝对定位会完全压住盒子
与浮动不同，浮动类似于环绕，不会压住文字图片，但是绝对定位会完全压住。
8.元素的显示与隐藏
8.1display
display：none:隐藏对象display:block:除了转换为块级元素外，同时还有显示元素的意思
注意，display隐藏元素后，元素不再占有原来的位置！
8.2visibility
visibility:visble:元素可视visibility：hidden:元素隐藏
注意，visibility隐藏元素后，元素会占有原来的位置！
8.3overflow溢出
overflow:visible:不剪切内容也不添加滚动条overflow:hidden:不显示超过对象尺寸的内容，超出的部分被隐藏overflow:scroll:不管超出内容与否，总是显示滚动条overflow:auto:超出自动显示滚动条，不超出则不显示
需要注意的是定位后需要谨慎使用overflow，它有可能会剪切你的元素的一部分
