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,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...
随机推荐
- c# WF 第11节 RichTextBox
本节内容: 1:RichTextBox的简介: 2:实例 1:RichTextBox的简介: 2:实例 实现实例: 1个RichTextBox 2个label 9 个button 步骤一: 步骤2 ...
- Kavex GameDev-Resources
https://github.com/Kavex/GameDev-Resources 各种资源
- linux 硬盘满了后，查看使用目录占用空间情况
cd 切换到目录, du -ah --max-depth=1 查看当前目录下的 文件夹 占用情况
- Oracle 11g 服务端的安装步骤
Ø 简介 本文主要介绍 Oracle 11g 服务端的安装步骤,在介绍之前说明以下几点: 1. 所安装的服务器是本机的虚拟机,操作系统为 Windows Server 2019: 2. 以下 ...
- 微软官方 Github 上的 EF 示例项目 EntityFramework.Docs
项目地址:https://github.com/aspnet/EntityFramework.Docs/tree/master/samples/core 谢谢浏览!
- k8s修改pod的hosts文件
1.在1.7版本后使用HostAliases修改pod的hosts文件.该文件由kubelet管理 在deployment的yaml文件中添加在pod template 的spec里面即可: apiV ...
- Linux iSCSI 磁盘共享管理
Linux iSCSI 磁盘共享管理 iSCSI 服务是通过服务端(target)与客户端(initiator)的形式来提供服务.iSCSI 服务端用于存放存储源的服务器,将磁盘空间共享给客户使用,客 ...
- KVM virsh console
(1) 查看正在运行的虚拟机 root@kvm:~# virsh list Id Name State ------------------------------------------------ ...
- kafka中消费者消费消息之每个线程维护一个KafkaConsumer实例
1.首先启动自己的kafka集群哟. 启动zk: bin/zkServer.sh start conf/zoo.cfg. 验证zk是否启动成功: bin/zkServer.sh status conf ...
- PIE属性表多字段的文本绘制
最近研究了PIE SDK文本元素的绘制相关内容,因为在我们的开发中,希望可以做到在打开一个Shp文件后,读取到属性表的所有字段,然后可以选择一些需要的字段,将这些字段的所有要素值的文本,绘制到shp图 ...