CSS盒模型及浮动

最新推荐文章于 2023-08-22 09:44:01 发布

怪弹幕

最新推荐文章于 2023-08-22 09:44:01 发布

阅读量108

点赞数

分类专栏： CSS笔记文章标签： css html

本文链接：https://blog.csdn.net/SORYUSHIKINAMI/article/details/105815013

版权

CSS笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

盒模型：

元素/盒子的结构组成
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边距。边框以外是外边距，外边距默认是透明的，因此不会遮挡其它的任何元素。
内边距，边框和外边距都是可选的，默认值是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;
}

怪弹幕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型及浮动

盒模型：元素/盒子的结构组成元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边距。边框以外是外边距，外边距默认是透明的，因此不会遮挡其它的任何元素。内边距，边框和外边距都是可选的，默认值是0，但许多刘浏览器都会设置默认的外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对...
复制链接

扫一扫