height 的% 号,设置高度是没用的, 没有参照物.
height的px 是可以的
自适应
width:auto;height:auto;
一个css里面 俩个相同的属性,后面的会冲突调前面的.
padding是内边距
padding-top:10px; //height以及设置100px, 则在原基础上添加10px,
padding-bottom:10px;//
padding-left:10px;//
padding-right:10px/
简写:padding:10px
padding:10px;20px//上下10,,,左右20
padding:10px; 20px;30px; //上10 左右20 下30p
padding:10Px 20px 30px 40px 上右下左
margin 不占用内容的总宽度
margin-top: 50px; margin-letf:50px;margin-right:50;margin-bottom:50;
元素的可见性,超出盒子的部分
属性:visibility
值:visible 默认, hidden 元素不可见,但会占据空间 , collapse 隐藏表格的行与列不占位,如果不是表格,和hidden一样.
元素盒类型
盒模型的display属性, 可以更改本身和类型.
1块级元素 设置元素尺寸 隔离元素 div p
2行内元素, span 可以设置背景,但不能设置尺寸,自适应,不能隔离元素
3行内-块元素 img 可以设置大小 无法隔离其他元素
之间相互转换
(display:inline) 块级元素转换为行 , 在代码区 div 和文字挨在一起,则转换成行没有空格,是连在一起的;但是彼此之间换行了,有时为了代码间的直观美化,会换行但是之间会加个注释表示连接在一起. 去掉空格.
( display:block ) 行转换为快 , span元素后换行,同其他元素之间会有空格,挨在一起则不会有空空格.(可以用<!-- -->),转换成块,原来行元素间的空格或多个空格\换行会被压缩掉
(display:inline-block; ) 案例 快和行同时转换为行内块, 之间有回车,所以在转换成行内块时之间有空格(间隔),两个元素连在一起就不会有间隔.
(display-none) 盒子不可见,也不占位. 用于隐藏,显示等等.
浮动 float
float :letf //这是左浮动, 使用后当前(块1)层会悬浮到上面, 下一个块(块2)的样式如背景会到该层的后面,因为是块所以底下块的文字不会悬浮上来. 块2如果悬浮,则文字也悬浮;
如果,块2没有浮动, 背景会上移, 也就是位置移动了, 块3也向上移动文字,会与块2的文字重合.
如果 块1 浮动 1和2之间有文字,文字单独站一行, 在块1的旁边,(也就是说高度塌陷,但是有宽度.),而文字底下的块则上移,因为块1没有高度了,但是靠左在文字的下面(换行了),
如果 块1浮动 1和2之间有文字, 块2在浮动, 则文字会在块2的旁边,也就是文字围绕图片, 文字的优先级要落后于float. 块3的背景上移到1块下,但背景上面有一行文字宽度的距离.
clear
clear:both;//如果想继续呆在原位置, 就添加clear:both; 或clear:left; clear:right
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????div{ ???????????width: 200px; ???????????height: 200px; ???????????border-left:solid 10px red; ???????} ???????#a{ ???????????/*background:maroon;*/ ???????????float:left;} ???????#b{background:green; ???????????float:left; ???????????} ???????#c{background:blue;} ???</style></head><body><div id="a">我是a</div> ??1111111<div id="b">我是b</div><div id="c">我是c</div></body></html>css盒子模型
原文地址：https://www.cnblogs.com/ningjie/p/9610405.html