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,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...
随机推荐
- 智能指针类模板（中）——Qt中的智能指针
Qt中的智能指针-QPointer .当其指向的对象被销毁时,它会被自动置空 .析构时不会自动销毁所指向的对象-QSharedPointer .引用计数型智能指针 .可以被自由的拷贝和赋值 .当引用计 ...
- oracle 定时运行存储过程的实现
是基于PL/SQL 可视化工具的实现: 首先,先编写一个存储过程 点击procedure,右键新建,填写一个你编写的存储过程的名字: 如果是对正常的表进行操作,那么直接在begin和end ...
- 《Zabbix》
https://github.com/itnihao/zabbix-rpm https://github.com/itnihao/zabbix-book 一.zabbix支持的主要监控方式: zabb ...
- BZOJ1688 「USACO05OPEN」Disease Manangement 背包+状压DP
问题描述 BZOJ1688 题解 背包,在转移过程中使用状压. \(\mathrm{Code}\) #include<bits/stdc++.h> using namespace std; ...
- php 学习笔记之关于时区的那点事
科普一下什么是时区 众所周知,地球绕着太阳转的同时也会自转,因此同一时刻不同地区所接收到太阳照射的情况不同,所以有的地区是日出,有的地区是日落,还有的地区可能是黑夜. 既然地球上的不同地区时间不同,那 ...
- T-SQL 简介
1. 变量说明语句:用来说明变量的命令. 2. 数据定义语言(Data Definition Language,DDL):用来建立数据库和定义列等数据结构,主要是create table,drop d ...
- Codeforces Round #551 (Div. 2) E 二分 + 交互
https://codeforces.com/contest/1153/problem/E 题意 边长为n的正方形里面有一条蛇,每次可以询问一个矩形,然后会告诉你蛇身和矩形相交有几部分,你需要在最多2 ...
- npm和yarn的区别，我们该如何选择?
首先,这两个都属于js包管理工具,都可以安装包或者模块yarn 是由facebook.google等联合开发推出的区别: npm 下载包的话 比如npm install它是按照包的排序,也就是队列挨个 ...
- nginx 日志配置log_format用法
nginx服务器日志相关指令主要有两条: 1.一条是log_format,用来设置日志格式: 2.另外一条是access_log,用来指定日志文件的存放路径.格式和缓存大小,可以参加ngx_http_ ...
- maven聚合项目以及使用dubbo远程服务调用debug操作。
1.maven聚合项目以及使用dubbo远程服务调用debug操作. 然后操作如下所示: 然后如下所示: 启动断点所在的包的服务.以debug的形式启动. 断点进来的效果如下所示: 接下来请继续你的表 ...