css 盒子下
1.padding
有小属性
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
小属性
综合属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*单独一个上下左右*/
/*padding: 10px;*/
/*单独两个 上下 左右*/
/*padding: 10px 20px;*/
/*单独三个上 左右 下*/
/*padding: 10px 20px 30px;*/
/*单独四个 顺时针上右下左*/
padding: 10px 20px 30px 40px;
} </style>
</head>
<body>
<div class="box">alex </div>
</body>
</html>
综合
2.border
线框与三个属性 颜色 大小 样式
border-left-color:red
border-left-style :solid
border-left-width:10px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0; }
.box{
width: 200px;
height: 200px;
background-color: red; /*width style color*/
/*根据方向来设置*/
/*border-left: 5px solid green;
border-right: 1px dotted yellow;
border-top: 5px double purple;
border-bottom: 1px dashed purple;*/ /*border-left-style: solid;
border-left-width: 1px;
border-left-color: green;*/ border-width: 5px 10px;
border-color: green yellow;
border-style: solid double; /*border: 5px solid green*/ }
</style>
</head>
<body>
<!-- padding是标准文档流，父子之间调整位置 -->
<div class="box">alex</div> </body>
</html>
border 三元素
3.margin
进行兄弟之间的分块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s1{
background-color: red;
margin-right: 30px;
}
.s2{
background-color:rgb(0,128,0);
margin-left: 30px;
}
</style>
</head>
<body>
<!--span 永远是1行-->
<span class="s1">alex</span>
<span class="s2">wusir</span> </body>
</html>
兄弟距离
4.margin 的坑
在两个方块进行移动的时候 在上下模块下 一个上 一个下 两个快之间的间距不是位移相加 而是最大的那段位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 40px;
}
.s2{
width: 200px;
height: 200px;
background-color:rgb(0,128,0);
margin-top: 100px; }
</style>
</head>
<body>
<!-- -->
<div class="s1"></div>
<div class="s2"></div> </body>
</html>
margin 的坑
4.1 在父子模型下 移动子盒子模型父模型也会改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 40px;
}
.s2{
width: 200px;
height: 200px;
background-color:rgb(0,128,0);
margin-top: 100px; }
</style>
</head>
<body>
<!-- -->
<div class="s1"></div>
<div class="s2"></div> </body>
</html>
margin 父子模型的 坑
5.display
display 显示 必须是在标准文档下 (没有 float)
属性:
display:block 块级标签 -独占一行 -可以设置宽高 不设置默认100%宽
inline 行内标签
- 在一行内显示
- 不可以设置宽高，根据内容来显示宽高
inline-block 行内块
- 在一行内显示
- 可以设置宽高 none 不显示 隐藏 不在文档上占位置 visibility：hidden;隐藏 在文档上占位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
/*display: inline;*/
display: inline;
border: 1px solid yellow;
}
div a {
display: block;
width: 300px;
height: 300px;
}
span{
display:inline-block;
width: 300px;
height: 200px;
background-color: yellow; }
</style>
</head>
<body> <div class="box">alexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalex</div>
<div class="box">wusir</div> <div>
<a href="#">
<img src="https://i1.mifile.cn/a4/xmad_15350224111785_ASnBL.jpg" alt="" width="300" height="300">
</a>
</div> <input type="text">
<span>aaaaa</span>
<span>aaaaa</span> </body>
</html>
display 详细代码
6.浮动
关于浮动 优点是可以使块级标签在一行内显示
缺点是:没有高度的限制下 会重叠在一起 需要控制
盒子浮动:不在页面占位置,如果父盒子不设置高度,那么撑不起父盒子的高度,页面会出现混乱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
/*height: 400px;*/ height: 300px;
}
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 300px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div> </div> <div class="father2"></div> </body>
</html>
浮动错误示例
如果父类不设置高度,则会不断撑大,会造成页面混乱
7.解决浮动方法
清除浮动：
1.给父盒子设置固定高度（后期不好维护）
2.clear:both;
给浮动元素的最后面，加一个空的块级标签(标准文档流的块级标签)
给当前这个标签设置一个clearfix类名，设置该标签属性cleart:both 问题：代码冗余
3. .clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both
}
4.overflow:hidden; 要浮动一起浮动，有浮动，清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 500px;
/*height: 400px;*/ }
.box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 500px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
/*这里是将clear：both 重新将浮点固定*/
.clearfix{
clear:both;
}
</style>
</head>
<body> <div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<!-- 内墙法 -->
<div class="clearfix"></div> </div> <div class="father2"></div> </body>
</html>
伪元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.clearfix:after{
content: '.';
clear:both;
display: block;
visibility: hidden;
height: 0; }
.father{
width: 500px; /*overflow: hidden;*/
/*height: 400px;*/
/*height: 300px;*/
}
/*.clearfix{*/
/*clear:both*/
/*}*/ .box1{
width: 100px;
height: 100px;
background-color:red;
float: left;
}
.box2{
width: 100px;
height: 50px;
background-color:green;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
float: left;
}
.father2{
width: 600px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father clearfix" >
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div> </div>
<!--需要加入一个class类-->
<!--<div class="clearfix"> </div>--> <div class="father2"></div>
</body>
</html>
伪元素清除法
css 盒子下的更多相关文章
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- CSS 盒子模型概述
一.简介 CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成. 盒子模型,最里面的部分是实际内容:直接包围内 ...
- 几个容易出错的css盒子模型细节
css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- CSS盒子的浮动
web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...
- css盒子模型（3）
盒子模型 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在讲理论之前,我们先要知道网页设计中常听的属性名:内容(co ...
- 前端面试必备的css盒子模型
今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...
随机推荐
- linux学习（三）系统目录结构
登录系统后,在当前命令窗口下输入命令: ls / 你会看到如下图所示: 树状目录结构: 以下是对这些目录的解释: /bin:bin是Binary的缩写, 这个目录存放着最经常使用的命令. /boot: ...
- markdown 编辑格式
# h1## h2### h3#### h4##### h5###### h6 *em* **strong** ***斜体加粗*** ~~待删除~~ 无序列表,用 * + - 都可以表示,[可以用四个 ...
- JDOJ1178:铺地板II
JDOJ1178:铺地板II https://neooj.com/oldoj/problem.php?id=1178 题目描述 用1 x 1和2 x 2的磁砖不重叠地铺满N x 3的地板,共有多少种方 ...
- 【oracle】INSERT INTO SELECT
- CF-579 D. "Or" Game
题意: 给一列数,任选一个数,乘x,最多操作k次,问最后a[1]|a[2]|...|a[n]的最大值是多少; 思路: 或运算是0|0=0,1|0=1,0|1=1,1|1=1,那么每次乘一个大于等于2的 ...
- CF1178D Prime Graph
题目链接 题意 构造一张有\(n(3\le n\le 1000)\)个点的无向图(无重边和自环).满足: 边的总数为素数 所有点的度数均为素数 输出方案 solution 如果所有点的度数确定了.那么 ...
- 安装Ubuntu时出现Intel VT-X没有开启
试了很多种方法,最后原来是只需要进入bosi系统,然后进入Intel Virtual Technology 使之成为Enabled即可,就这么简单粗暴.
- CSP-J&S2019第二轮游记认证
Day 0 我毕竟不是竞赛省,在黑龙江这个弱省任何初中都没有竞赛生的----在初中,文化课第一----永远如此. 因而,我并不能翘掉周五的文化课来复习或是提前前往省城参加下午2:00~6:00的试机. ...
- POJ 3041 Asteroids（二分图最大匹配）
###题目链接### 题目大意: 给你 N 和 K ,在一个 N * N 个图上有 K 个 小行星.有一个可以横着切或竖着切的武器,问最少切多少次,所有行星都会被毁灭. 分析: 将 1~n 行数加入左 ...
- Sitecore 8.2 渠道简介
渠道是联系人通过广告系列或面对面与您的品牌互动时所使用的路径.联系人可以通过手机上的应用与您的品牌互动,点击社交网络上的广告访问您的网站,或访问实体店购买商品.使用Sitecore体验平台,您可以使用 ...