今天学了什么
1.box-sizing:border-box
当设置box-sizing:border-box;
设置padding,和border,它的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
当设置padding和border时宽度会发生改变
总宽度=width+border+padding
2.浮动float
目的:为了让元素并排显示
3.如何清除浮动
给下面的兄弟元素给clear:both;
给父级加overflow:hidden;
用伪元素,给父级内容生成
.row:before{
display:table;
content:””
}
.row:after{
display:table;
content:””
clear:both;
4.定位:position
position:absolute | relative
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
Absolute定位
绝对定位的元素的位置相对于最近的相对定位的父元素，如果没有已定位的父元素，那么它的位置相对于<html>:
都通过left,top,right,bottom移动
例子:搜索框
当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
5.布局方式的总结
1.默认布局
2.浮动布局(左右安置)
3.层级布局(定位)
6.实现元素的垂直水平居中
父元素设置parent{position:relative;}
子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%
margin-top:-50%
}
7.CSS样式的几种引入方式
外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
内部样式表（位于 <head> 标签内部）
<style>
p{color:pink;font-size:16px}
</style>
内联样式（在 HTML 元素内部）
<p style=”color:pink;font-size:16px”>hello world</p>
给同一选择器设置同一样式,离元素近的样式设置方式优先级高
8绝对路径和相对路径
绝对路径：从盘符开始的路径
<img src="D:/images/down.jpg" alt=""/>
相对路径：相对当前文件所在的路径
同级目录 src='down.jpg'
下一级目录 src='images/down.jpg'
上一级目录 src='../down.jpg'
9.定位的宽高继承问题
父元素给position:relative
子元素position:absolute
学会了什么
1.box-sizing:border-box
当设置box-sizing:border-box;
设置padding,和border,它的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
当设置padding和border时宽度会发生改变
总宽度=width+border+padding
2.浮动float
目的:为了让元素并排显示
3.如何清除浮动
给下面的兄弟元素给clear:both;
给父级加overflow:hidden;
用伪元素,给父级内容生成
.row:before{
display:table;
content:””
}
.row:after{
display:table;
content:””
clear:both;
4.定位:position
position:absolute | relative
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
Absolute定位
绝对定位的元素的位置相对于最近的相对定位的父元素，如果没有已定位的父元素，那么它的位置相对于<html>:
都通过left,top,right,bottom移动
例子:搜索框
当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
5.布局方式的总结
1.默认布局
3.层级布局(定位)
6.实现元素的垂直水平居中
父元素设置parent{position:relative;}
子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%
margin-top:-50%
}
7.CSS样式的几种引入方式
外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
内部样式表（位于 <head> 标签内部）
<style>
p{color:pink;font-size:16px}
</style>
内联样式（在 HTML 元素内部）
<p style=”color:pink;font-size:16px”>hello world</p>
给同一选择器设置同一样式,离元素近的样式设置方式优先级高
8绝对路径和相对路径
绝对路径：从盘符开始的路径
<img src="D:/images/down.jpg" alt=""/>
相对路径：相对当前文件所在的路径
同级目录 src='down.jpg'
下一级目录 src='images/down.jpg'
上一级目录 src='../down.jpg'
9.定位的宽高继承问题
父元素给position:relative
子元素position:absolute
不会
输入框后面添加字
2.浮动布局(左右安置)
网友评论