溢出处理、盒子模型、背景图片、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 ...
随机推荐
- Cesium原理篇：6 Render模块(3: Shader)【转】
https://www.cnblogs.com/fuckgiser/p/5975274.html 在介绍Renderer的第一篇,我就提到WebGL1.0对应的是OpenGL ES2.0,也就是可编程 ...
- convmv 解决GBK 迁移到 UTF-8 ,中文 文件名乱码
yum install convmv 命令: convmv -f GBK -t UTF-8 -r --nosmart --notest <目标目录> -f from -t to --nos ...
- boot2docker
boot2docker 简介 boot2docker是解决非linux系统下运行Docker容器不方便的工具 官方介绍 Boot2Docker是在Windows操作系统上运行Docker的唯一方法,现 ...
- android ------ 高版本的 Tablayout 下划线宽度
前面呢,有写过TabLayout的博客,最近开发用到了高本版遇到一些问题,来总结一下 Android--------TabLayout实现新闻客户端顶部导航栏 Android中Tablayout设置下 ...
- netty-websocket-spring-boot-starter不同url端口复用
netty-websocket-spring-boot-starter是一个基于netty的websocket服务端,目前笔者使用的版本依托于Springboot.官方网址https://github ...
- OCR（Optical Character Recognition）算法总结
https://zhuanlan.zhihu.com/p/84815144 最全OCR资料汇总,awesome-OCR
- ETF计算公式:IOPV
IOPV=(申购.赎回清单中必须现金替代的替代金额+申购.赎回清单中退补现金替代成份证券的数量与最新成交价相乘之和+申购.赎回清单中可以现金替代成份证券的数量与最新成交价相乘之和+申购.赎回清单中禁止 ...
- Spring Boot JDBC：加载DataSource过程的源码分析及yml中DataSource的配置
装载至:https://www.cnblogs.com/storml/p/8611388.html Spring Boot实现了自动加载DataSource及相关配置.当然,使用时加上@EnableA ...
- 浅谈PageRank
浅谈PageRank 2017-04-25 18:00:09 guoziqing506 阅读数 17873更多https://blog.csdn.net/guoziqing506/article/de ...
- IIS部署FLASK网站
在 Windows 平台部署基于 Python 的网站是一件非常折腾的事情,Linux/Unix 平台下有很多选择,本文记录了 Flask 部署到 IIS 的主要步骤,希望对你有所帮助. 涉及工具和平 ...