MARGIN
margin用法 (外边距、边界) | |
---|---|
1:margin在元素外围,不会撑大元素的大小 | |
2:作用:控制元素与元素之间的间距。 | |
3:给单一方向添加margin | |
margin-left/right/top/bottom | |
4 :margin设置方法: | |
margin:30px; 四周 | |
margin:10px 30px; 上下 左右 | |
margin:10px 30px 50px 上 左右 下 | |
margin:10px 30px 50px 100px 上右下左 | |
5:margin:0 auto; | |
让当前元素在父元素里面左右居中。 | |
6:margin常出现的bug | |
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。 | |
b:如果父元素和第一个子元素没有浮动的情况下,给第一个子元素添加margin-top,会错误放在父元素上面。 |
盒子大小计算
盒子在网页中占有的真实空间:
占有的宽度:width+padding-left/right+border-left/right+margin-left/right
占有的高度:height+padding-top/bottom+border-top/bottom+margin-top/bottom
网页规划
1.元素的命名
a.划分外围结构:id选用驼峰式命名法或者语义化。
eg:newsLeft/news
b.版心的命名:连字符命名法。
eg:news-con
内容版快的命名:下划线命名法。
eg:news_left
2.css外部样式表
1.网页尽可能地使用外部样式表。
2.每一个页面都需要有属于自己的样式表。
3.每一个网站都拥有公共样式。
4.每一个网站至少拥有一个重置样式的样式表用来清除所有默认样式。
3.css外部样式表命名示例
index.css(首页样式表)
public.css(公共样式表)
reset.css(重置样式表)
外部样式表首行:1.@charset"utf-8";
首行说明:用来声明样式表所使用的语言。