一个80后网站前端设计和平面设计师的小站
您现在的位置:首页 > 建站基础 > 程序代码 > CSS样式-盒子模型布局注意要点

CSS样式-盒子模型布局注意要点

编辑:网友小新发布于:2020-02-16 13:38:42程序代码人浏览

摘要:我们做网页前端设计,尤其现在做的是响应式设计布局,用到盒子模型布局,就会遇到这些要CSS设置对其进行控制,下面这些都是新手做常遇到的一些问题,希望能对大家有所帮助。

1、盒子模式:页面中的所有元素都可以看成一个盒子,占据着一定的页面空间

2、overflow:属性
hidden:超出部分不可见,默认值
scroll:显示滚动条
auto:如果有超出部分,显示滚动条

3、border属性:
border-width:px \ thin \ medium \ thick
border-style:dashed \ dotted \ solid \ double
border-color:颜色
border:width  style color  书写顺序。
如水平分割线:.line { height:2px; width:500px; border-top:2px solid #e5e5e5; }

4、内外边距:取值:px , %(外层盒子的宽度和高度)
内边距:
padding:5px;   上右下左的内边距
padding:4px  3px  2px 1px ;    上为4px, 右为3px, 下为2px, 左为1px
padding-top:10%;     上内边距
外边距:
margin:   5px;             上右下左的外边距
margin-top:10%;      上外边距
margin的合并:两个div的margin分别为15px,20px ,那么两个div的间距不是35px,而是20px

5、水平居中问题:
图片、文字水平居中: text-align:center;  div的水平居中:margin:0 auto;

6、块和行内元素:
块(block)元素:独占一行
元素的height、width、margin、padding都可设置
常见的block元素:div、p 、h1~h6、ol、ul、table、form
显示为block元素:display:block;

行内(inline)元素:不单独占用一行
width、height不可设置;常见的inline元素:span、a,显示为inline元素:displap:inline;
行内块(inline-block)元素:同时具备inline元素、block元素的特点

不单独占用一行:元素的height、width、margin、padding都可设置,常见的inline-block元素:img

行内元素之间有个间距问题   解决:font-size:0;
行内元素\块元素\行内块元素的相互转换
display:none;   display:block;   display:inline;    display:inline-block;
inline元素a转换为block元素,从而使a元素具有块元素特点。a{ display:block;}

7、浮动float与清除浮动clear属性:
float :   float:left;  左浮动     float:right; 右浮动    float:none;  不浮动
clear:  clear:both; 清除左右两边的浮动   clear:right \ right;只能清除一个方向的浮动
clear:none;  默认值,只在需要移动已指定的清除值时用到

8、定位: 层定位具有的下面的这些属性:
position:fixed \ relative \ absolute ;(分别代表固定、相对、绝对定位)
left:px;(左)  right:px;(右) top:px;(上)bottom:px;(下) z-index:n;(n值大的在上面)
static:默认值,没有定位,元素出现在正常的流中 top, bottom, left, right , z-index无效
fixed:相对于浏览器窗口进行定位 top, bottom, left, right , z-index 有效
relative:相对于其直接父元素进行定位 top,bottom,left,right,z-index有效,其在文档流中的原位置依然存在
absolute:相对于 static 定位以外的第一个父元素 进行定位 top, bottom, left, right , z-index 有效,其在正常流中的原位置不再存在,相对于relative/absolute/body定位 .

标签: 盒子模型  CSS样式布局  

打赏赞助本站

  • 如果你觉得本站很棒,对您有所帮助,可以通过扫码打赏赞助本站哦!我也会努力做好本站哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~