盒模型:
- 元素/盒子的结构组成
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边距。边框以外是外边距,外边距默认是透明的,因此不会遮挡其它的任何元素。
内边距,边框和外边距都是可选的,默认值是0,但许多刘浏览器都会设置默认的外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置。
内边距,边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
外边距可以是负值,而且在很多情况下都要使用负值的外边距。内边距不可以设置负值;div,h1,或p元素常常被称为块级元素,意味着这些元素显示为块盒子。span和input等元素称为“行内元素”,这是因为他们的内容显示在行中,即“行内盒子”。
- 块级元素与行内元素区别
块级元素可设置宽高,行内元素宽高有元素内容决定
块级元素可设置垂直方向的内外边距,行内元素无法设置垂直的内外边距
块级元素默认显示方式占满整行,相邻的行内元素默认在同一行显示
通过display属性值进行元素显示方式的更改
- 盒子类型的相互转换
块级盒子默认 display:block ; 转换操作 display:inline-block; display:inline;
行内盒子默认 display:inline; 转换操作 display:inline-block; display:block;
行内块盒子默认 display:inline-block; 转换操作 display:inline; display:block; - 内边距-padding:
元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。padding属性接受长度值或百分比值,但不允许使用负值。 - 边框-border
元素的边框(border)是围绕元素内容和边距的一条或多条线。 border 属性允许你规定元素边框的样式,宽度和颜色。每个边框都有这三个部分组成; border-style:solid dotted dashed double; - 外边框margin:
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性,这个属性接受任何长度单位,百分值甚至负值。 margin:5px 10px 15px 20px;(顺序为 上 右 下 左)
CSS浮动:
- 浮动的盒子可以向左或者向右移动,直到他们的边缘碰到父盒子或另一个浮动盒子的边框为止,由于浮动盒子不在文档的普通流中,所以文档的普通流中的浮动块盒子不占位。浮动不完全是定位,也不是正常的流布局。
- 浮动元素适用于任何元素(行内元素,块元素)
- 浮动元素会默认水平排列,如果超出父元素的默认宽度,会自动跳转到下一行
- 浮动元素会脱离文档流,显示方式为仅靠近父元素的左边缘,或者之前有浮动的元素的边缘位置
- 浮动后的元素直接的父元素在没有设置高度的情况下高度会丢失
CSS常用清除浮动方法
空标签清除浮动 再最后一个浮动的元素的后面加上空标签清除浮动
利用伪类元素清除浮动 after{content:’’; display:block; clear:both}
触发父级元素BFC模式进行浮动的清除 overflow:hidden;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>box</title>
<link rel="stylesheet" href="demo5.css">
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
<input type="text">
</div>
<div class="1"></div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
div {
padding-left: 50px;
padding-right: 100px;
padding-top: 20px;
padding-bottom: 10px;
background-color: violet;
width: 50px;
height: 20px;
}
.1{
width: 200px;
height: 300px;
}