溢出处理、盒子模型、背景图片、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 ...
随机推荐
- MyBatis(九)：Mybatis Java API批量操作（增、删、改、查）
最近工作中用到了mybatis的Java API方式进行开发,顺便也整理下该功能的用法,接下来会针对基本部分进行学习: 1)Java API处理一对多.多对一的用法: 2)增.删.改.查的用法: 3) ...
- 【深入学习linux】CentOS 7 最小化安装后的注意事项及一些必备组件的安装
转载:https://blog.csdn.net/F_Srion/article/details/54910943 在VM虚拟机中安装CentOS 7 时 有时候顾虑到电脑硬件性能,我们需要最小化安装 ...
- 让ie10/11支持非单页面的vue/es6
为了满足某些客户的要求,最近让前端同学实现了ie 10(windows 7)/11(windows 10)支持多页面的vue/es6,基本参考如下: https://www.cnblogs.com/n ...
- 【MySQL】Mysql模糊查询like提速优化
一般情况下like模糊查询的写法为(field已建立索引): SELECT `column` FROM `table` WHERE `field` like '%keyword%'; 上面的语句用ex ...
- python开发笔记-python调用webservice接口
环境描述: 操作系统版本: root@9deba54adab7:/# uname -a Linux 9deba54adab7 --generic #-Ubuntu SMP Thu Dec :: UTC ...
- C#实体类null自动转空字符串
C#实体类null自动转空字符串 using System.ComponentModel.DataAnnotations; [DisplayFormat(ConvertEmptyStringToNul ...
- PHP MQTT 实践
MQTT介绍:http://mqtt.org 服务器端https://mosquitto.org/download/ PHP客户端https://github.com/bluerhinos/phpMQ ...
- Spring Cloud（一）简单的微服务集成Eureka
1 Spring Cloud简介 1.1 简介 Spring Cloud项目的官方网址:https://projects.spring.io/spring-clo ...
- 【iCore4 双核心板_FPGA】实验二十：NIOS II之UART串口通信实验
实验指导书及源代码下载地址: 链接:https://pan.baidu.com/s/1g_tWYYJxh4EgiGvlfkVu1Q 提取码:dwwa 复制这段内容后打开百度网盘手机App,操作更方便哦 ...
- Java 面向接口的编程
面向接口的编程 什么是面向接口编程呢?我个人的定义是:在系统分析和架构中,分清层次和依赖关系,每个层次不是直接向其上层提供服务(即不是直接实例化在上层中),而是通过定义一组接口,仅向上层暴露其接口功能 ...