目录
盒子模型
-
网页是由很多矩形组成的，就是盒子模型。它就是一个概念，一个模型。
主要由下面的几个元素组成。
content 内容
文字部分。
padding 内边距
文字到边框的距离，right,left,top,bottom
可以复合。
border 边框
不说了。
margin 外边距
盒子和盒子之间的距离。
margin 叠加和传递
叠加：
当两个盒子同时加上外边距的时候，就会出现叠加问题。
取大。
但是左右边距不叠加。
传递：
只会出现在嵌套中，只有margin-top会出现传递问题。
给父级标签加上一个内边距就可以避免。
也可以加边框。
也可以家溢出隐藏属性，overflow:hidden
块与内联
<div><span>
块特点
<div>
1、独占一行，当有两个的时候，默认上下排列。不允许别的跟在它后面。
2、支持所有样式。
3、不设置宽的时候，跟着父标签。默认高度跟内容高度相同
内联特点
<span>
1、总在一行显示，允许别的跟在后面。
2、不支持宽高。宽度由内容撑开。
3、代码换行被解析，两个内容中间加上一个空格。写到一行中空格会消失。
块标签与内联标签的比较
一般用<div>
默认样式
浏览器调试工具
浏览器中可以调试html和css的默认样式，F12
标签默认值
很多标签都有默认的盒子模型。
reset
恢复默认样式、
其他常用样式
显示框类型
属性display，是指对html标签的显示方式，取值如下：
none 隐藏起来（visibility也可以隐藏，取值hidden） block 把元素显示城块标签类型。 inline 把元素设置成内联 inline-block 块和内联全都具备，牛
溢出隐藏
overflow，当内容溢出元素框时候操作，属性取值有：
visible 默认，不会被修剪，框外显示 hidden 修剪 scroll 拖拽滚动条查看，overflow-x/y：scroll（在某一方向设置滚动条） auto 自适应
透明度
opacity : 0.5
rgba ( 255 , 0 , 0, 0.5)
扫一扫
703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
