溢出处理、盒子模型、背景图片、float（浮动）
一、overflow:溢出内容的处理
overflow:hidden; 溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)
overflow:auto; 自动滚动(有溢出产生滚动，没有就不产生滚动条)
overflow:scroll; 不管有没有溢出均产生滚动条
二、盒子模型：
margin(外边距)、border(边框)、padding(内间距)、内容区域
1.w3c盒子模型(默认盒子模型-标准的盒子模型)：
a.w3c盒子模型设置的宽高为内容区的宽高;
b.padding(内间距)、border(边框)、margin(外边距)均属于所设置宽高外的部分；
c.盒子宽高：border宽高+padding宽高+内容区域宽高【设置的宽高】
d.所占屏幕宽高：盒子宽高+margin宽高
2.ie盒子模型
a.ie盒子模型设置的宽高为盒子宽高
b.盒子宽高【设置的宽高】：border宽高+padding宽高+内容区域宽高
c.所占屏幕宽高：盒子宽高+margin宽高
3.两种盒子的比较代码如下：
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: pink;
}
.one{
background-color: teal;
/*width: 80px;
height: 80px;*/
padding: 10px;
box-sizing: border-box; border-left: 10px solid cyan;
border-bottom: 10px solid coral;
border-right: 10px solid cyan;
border-top: 10px solid coral;
}
</style>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
三、border属性：
1.border-radius:5px(或百分比); 设置边框圆角
2.border-top-left-radius: 40px; 设置左上角边框圆角
3.border-bottom-right-radius: 40px; 设置右下角边框圆角
4.如果设置子元素圆角且父元素有背景颜色则父子元素均需要设置圆角边框：
eg：
<style type="text/css">
div{
width: 200px;
height:200px;
background-color: pink;
}
.inner,.outer{
border-radius: 30px;
}
.inner{
background-color: teal;
}
</style> <body>
<div class="outer">
<div class="inner"> </div>
</div>
</body>
四、background属性：
1.background-image:url(图片路径); 设置背景图片
2.background-repeat:(背景图片平铺方式)
eg：
<style>
/*背景图片重复出现的方式*/
background-repeat: no-repeat;
/*在x方向铺满一行*/
background-repeat: repeat-x;
/*在y方向平铺一列*/
background-repeat: repeat-y;
/*默认的铺满整个区域*/
background-repeat: repeat;
</style>
3.background-size:100% 100%;(宽、高) 设置背景图片大小
4.图片精灵技术：(在元素区域内显示背景图片中指定区域图像)
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片精灵技术</title>
<style type="text/css">
div{
width: 153px;
height: 156px;
background-image: url(./images/QQ图片20190620112449.jpg);
}
.one{
/*设置背景图片的位置*/
background-position: -113px -120px;
}
.two{
background-position: -633px -652px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
5.background-attachment： 固定显示图片背景
实例代码：
<style type="text/css">
body{
background-image: url(./images/d2a9ccbfe758a6619d25d0299257f860.jpg);
/*背景图片绑定的位置，视口区？元素*/
/*1、固定背景 不随滚动条的滚动而滚动*/
background-attachment: fixed;
/*2、默认的 随着滚动条滚动*/
background-attachment: scroll;
}
</style>
五、float(浮动)【清除浮动】
1、清除兄弟元素间的浮动影响（clear:both;）
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
/*浮动文字不会被覆盖*/
.one{
height: 200px;
background-color: red;
/*左浮动 浮动元素脱离文档流 原来的位置不保留*/
float: right;
}
.two{
background-color: orange;
float: right;
}
.three{
background-color: yellow;
/*margin-top: 100px;*/
/*清除其他元素的浮动对自身元素(位置等)产生的影响*/
/*清除兄弟元素的浮动*/
/*clear: both;*/
float: right;
}
.four{
background-color: green;
float: right;
}
.five{
background-color: blue;
/*float: right;*/
clear: both;
}
.six{
background-color: cyan;
/*float: right;*/
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
<div class="six">six</div>
</body>
</html>
2、清除子元素浮动对父元素的影响： (overflow:hidden;)
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子浮动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
border: 1px solid blue;
list-style: none;
/*清除浮动 给父元素设置了高度*/
/*overflow: hidden;*/
}
li{
border: 1px solid red;
width: 100px;
height: 100px;
float: left;
}
div{
width: 100px;
height: 100px;
background-color: cyan; /*清除浮动*/
clear: both;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</body>
</html>
3、使用伪元素::after清除浮动(或使用无高的空兄弟div再清除兄弟浮动)
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素清除浮动</title>
<style type="text/css">
.inner{
width: 200px;
height: 100px;
background: cyan;
float: left;
}
.one{
width: 200px;
height: 100px;
background: coral;
}
/*
伪元素::after或:after【CSS2.1中的伪元素表示】(二者等价只不过是css版本的表示形式不一样)
在未设置高度的父容器使用::after伪元素添加一个额外的元素，对该元素使用清除兄弟浮动
其实在需要清除浮动的元素后面使用一个没有高度的空div再进行兄弟清除浮动也是可以的，而且这样还不需要借助于父元素
*/
.outer::after{
content: "";
display: block;
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">inner</div>
</div>
<div class="one">我是inner div后面的兄弟div</div>
</body>
</html>
溢出处理、盒子模型、背景图片、float（浮动）的更多相关文章
- css盒子模型，定位，浮动
1.盒子模型 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. ...
- CSS 盒子模型、RestCSS、浮动、定位
盒子模型 边框:border 左边框:border-left 右边框:border-right 上边框:border-top 下边框:border-bottom 复合样式:border 边框颜色:bo ...
- css基础-盒子模型+背景和列表
border-style的值: none 无 dotted 点状 dashed 虚线 solid 实线 double 双实线 margin: 垂直方向两个相邻元素都设置了外边距,那么外边距会发生合并 ...
- CSS - 插入图片img和背景图片
1. img插入图片,用的最多,比如产品展示类 .section img { width: 200px;/* 插入图片更改大小 width 和 height */ height: 210px; mar ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- python 之 前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）
11.312 盒子模型 HTML文档中的每个元素都被比喻成矩形盒子, 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如 ...
- CSS初识- 选择器 &背景& 浮动& 盒子模型
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...
- 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
随机推荐
- RocketMQ安装部署
一.简介RocketMQ RocektMQ是阿里巴巴在2012年开源的一个纯java.分布式.队列模型的第三代消息中间件,不仅在传统高频交易链路有着低延迟的出色表现,在实时计算等大数据领域也有着不错的 ...
- iobit-unlocker --- 类似 Unlocker 工具，强制删除文件或文件夹
win10 使用 Unlocker 1.9.2 常有问题,以前在win7上使用完全ok的 更换成:iobit-unlocker ,win10体验还可以,类似Unlocker 下载地址: https:/ ...
- QC9.2登陆时显示一个X号
这个是因为浏览器安全设置的问题,具体解决步骤如下: 进入“工具-Internet选项”设置窗口,进入“高级”选项卡,将“安全”设置中的“启用内存保护减少联机攻击”选项的勾选去掉,然后应用并确定.重启浏 ...
- linux查看实时日志命令
tail -f localhost_access_log.2018-12-11.txt(当前时间)今天的实时日志,操作一下系统,就会报出相应的日志
- OPMS是什么？
OPMS OPMS项目+OA管理系统 OPMS管理系统是意思是PMS+OA,项目+办公管理.符合日常项目和OA管理,特别适合扁平化管理的微中小企业. OPMS采用是Beego框架和Bootstrap前 ...
- jstree： 获得根节点，checkbox事件处理
$.jstree.defaults.core.themes.responsive = true; $.jstree.defaults.checkbox.three_state = false;// 如 ...
- Vmware解决虚拟机不能联网的问题
1. 设置为NAT模式 2. 启动win7的服务,命令窗口输入services.msc 回车 3. 修改Vmware的设置
- Zipkin+Sleuth 链路追踪整合
1.Zipkin 是一个开放源代码分布式的跟踪系统 它可以帮助收集服务的时间数据,以解决微服务架构中的延迟问题,包括数据的收集.存储.查找和展现 每个服务向zipkin报告计时数据,zipkin会根据 ...
- Spring boot启动成功后输出提示
添加logback-spring.xml,将log输出到文件,控制台输出的level改为error因此只会出处banner src/main/resources/banner.txt的内容为 star ...
- mysql字段值如何区分大小写
今天做sql查询,发现字段值没区分大小写 mysql> select guid,type,parent_guid from api_assets where guid='3rfI2PsSrCz9 ...