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,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...
随机推荐
- 浅谈JS的toString
任何一个对象都有toString()方法(默认继承自Object,自己可以重写),此方法返回一个字符串. var sayYo = function () { alert("sayYo2!&q ...
- unittest单元测试,基于java的junit测试框架
import unittestclass study(unittest.TestCase): def testXia(self): self.assertEqual((3*4),20) def tes ...
- arXiv网站
arXiv 原先是由物理学家保罗·金斯巴格在1991年建立的网站, 我们会将预稿上传到arvix作为预收录,因此这就是个可以证明论文原创性(上传时间戳)的文档收录网站.
- 文件名工具类 MoFileNameUtil
文件名工具类 MoFileNameUtil MoFileNameUtil public class MoFileNameUtil { //不包含点号 public static String getF ...
- Mybatis日志（七）
Mybatis内置的日志工厂提供日志功能,具体的日志实现有以下几种工具: SLF4J Apache Commons Logging Log4j 2 Log4j JDK logging 具体选择哪个日志 ...
- MySQL学习笔记3——DCL
DCL(数据控制语言) 1.创建用户 *CREATE USER 用户名@IP地址 IDENTIFIED BY '密码'; >用户只能在指定的IP地址上登录*CREATE USER 用户名@'%' ...
- go 创建切片
package main import "fmt" func main() { //自动推导类型,同时进行初始化 s1 := [],,,} fmt.Println("s1 ...
- VBS实现UTC时间和本地时间互转
本地时间转UTC时间 dim SWDT, datetime, utcTime Set SWDT = CreateObject("WbemScripting.SWbemDateTime&quo ...
- [技术]SYZOJ 实现网站与评测端分离
SYZOJ 实现分布式评测 这篇博客的起因是学校的OJ因为高考被切断了, 但是我的公网OJ是个实现很不清真的UOJ而且上面只有1core和1GB内存. 费了一些周折部署好syzoj之后大家喜闻乐见地被 ...
- ScreenToGif——gif动图工具使用说明
前言 最近因回复了博客园的某篇博文并留言求推荐制作gif动图的工具,随后一名热心园友向我推荐了ScreenToGif 不试不知道,一试我就喜欢上了这款动图制作工具(再也不用PS来制作了,虽然我也不会2 ...