建议遵循以下顺序:
border-radius 属性用于设置元素的外边框圆角
语法:
border-radius: length;
示例:
/* 圆形 盒子为正方形 */
border-radius: 50%; /* 设置成宽度和高度一半即为圆形 */
/* 圆角矩形 盒子为长方形 */
border-radius: 高度的一半; /* 设置成高度一半即为圆角矩形 */
/* 可设置不同的圆角 */
border-radius: 10px 20px 30px 40px;
border-radius: 10px 40px;/* 主对角线 副对角线 */
box-shadow 属性为盒子增加阴影
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置 允许负值 |
v-shadow | 必需。垂直阴影的位置 允许负值 |
blur | 可选。模糊距离。(影子的虚实) |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。(参阅 CSS 颜色值)(一般使用 rgba ) |
inset | 可选。将外部阴影(outset)改为内部阴影 |
注意:
默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
盒子阴影不占用空间,不会影响其他盒子排列
在 CSS3 中,新增了文字阴影样式
text-shadow 属性为文字增加阴影
语法:
text-shadow: h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置 允许负值 |
v-shadow | 必需。垂直阴影的位置 允许负值 |
blur | 可选。模糊距离 |
color | 可选。阴影的颜色。参阅 CSS 颜色值 |
所谓的标准流,就是标签按照规定好默认方式排列
以上都是标准流布局,我们前面学习的就是标准流,标准流是最基本的布局方式。
这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了。
注意:实际开发中,一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式)。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法:
选择器 {
float: 属性值;
}
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
1.设置了浮动的元素最重要的特性:
脱离标准普通流的控制移动到指定位置(脱标)
浮动的盒子不再保留原先的位置
2.如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
注意:浮动的元素是相互贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
2.浮动元素具有行内块元素特性
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后都具有行内块元素相似的特性
1.浮动元素和标准流父级搭配使用
为了约束浮动元素位置, 我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。符合网页布局第一准则
2.一个元素浮动了,理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
由于父级盒子很多情况下,不方便给高度,但子盒子浮动又不占有位置,最后父盒子高度为0,就会影响下面的标准流盒子
本质是清除浮动元素造成的影响
选择器 {
clear: 属性值;
}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
clear:both
**额外标签法**也称为隔墙法,是W3C推荐的做法
额外标签法会在浮动元素末尾添加一个空的标签,例如<div style="clear:both">
等)
注意:要求这个新的空标签必须是块级元素
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
可以给父级添加 overflow 属性,将其属性值设置为hidden、auto或scroll
注意:是给父元素添加代码
:after 方式是额外标签法的升级版。
注意:是给父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7专有 */
*zoom: 1;
}
注意:是给父元素添加
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
为什么需要清除浮动?
清除浮动的方式 | 优点 | 缺点 |
---|---|---|
额外标签法(隔墙法) | 通俗易懂,书写方便 | 添加许多无意义的标签,结构化较差 |
父级overflow:hidden; |
书写简单 | 溢出隐藏 |
父级 after 伪元素 | 结构语义化正确 | 由于IE6-7不支持 :after,兼容性问题 |
父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持 :after,兼容性问题 |
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top: 80px | 顶端偏移量,定义元素相对于其父元素的上边线的距离 |
bottom | bottom: 80px | 底部偏移量,定义元素相对于其父元素的下边线的距离 |
left | left: 80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | right: 80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
静态定位是元素的默认定位方式,无定位的意思
语法:
选择器 {
position: static;
}
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
语法:
选择器 {
position: relative;
}
特点(务必记住):
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的
语法:
选择器 {
position: absolute;
}
特点(务必记住):
定位中最常用的一种方式就是:子级是绝对定位的话,父级要用相对定位
总结:
因为父级需要占有位置,因此是相对定位,子盒子不要占有位置,则是绝对定位
有些情况下,如果父元素不需要占有位置,子绝父绝也会遇到
固定定位是元素固定于浏览器的可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变
语法:
选择器 {
position: fixed;
}
特点(务必记住):
粘性定位可以被认为是相对定位和固定定位的混合
语法:
选择器 {
position: sticky;
top: 10px; /* 距离可视区最上沿10像素后固定不动 */
}
特点:
跟页面滚动搭配使用。 兼容性较差,IE 不支持。
定位模式 | 是否脱标 | 移动位置 | 是否常用 |
---|---|---|---|
static 静态定位 | 否 | 不能使用边偏移 | 很少 |
relative 相对定位 | 否(占有位置) | 相对于自身位置移动 | 常用 |
absolute 绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
fixed 固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky 粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段少 |
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以用 z-index 来控制盒子的前后次序(z轴)
语法:
选择器 {
z-index: 1;
}
算法:
就可以让固定定位的盒子贴着版心右侧对齐了
示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>固定定位小技巧-固定到版心右侧title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
/* 1. 走浏览器宽度的一半 */
left: 50%;
/* 2. 利用margin 走版心盒子宽度的一半距离 */
margin-left: 400px;
width: 50px;
height: 150px;
background-color: skyblue;
}
style>
head>
<body>
<div class="fixed">div>
<div class="w">版心盒子 800像素div>
body>
html>
加了绝对定位的盒子不能通过
margin: 0 auto
水平居中,但是可以通过以下计算方法实现水平和垂直居中
算法:
示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位水平垂直居中title>
<style>
.box {
position: absolute;
/* 1. left 走 50% 父容器宽度的一半 */
left: 50%;
/* 2. margin 负值 往左边走 自己盒子宽度的一半 */
margin-left: -100px;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: pink;
/* margin: auto; */
}
style>
head>
<body>
<div class="box">div>
body>
html>
绝对定位和固定定位也和浮动类似。
行内元素添加绝对或者固定定位,可以直接设置高度和宽度(脱标)
块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小(脱标)
浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题。
浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
示例:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淘宝轮播图做法title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tb-promo {
position: relative;
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;
}
.tb-promo img {
width: 520px;
height: 280px;
}
/* 并集选择器可以集体声明相同的样式 */
.prev,
.next {
position: absolute;
/* 绝对定位的盒子垂直居中 */
top: 50%;
margin-top: -15px;
/* 加了绝对定位的盒子可以直接设置高度和宽度 */
width: 20px;
height: 30px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
}
.prev {
left: 0;
/* border-radius: 15px; */
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
/* 如果一个盒子既有left属性也有right属性,则默认会执行 left属性 同理 top bottom 会执行 top */
right: 0;
/* border-radius: 15px; */
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
/* background-color: pink; */
background: rgba(255,255,255, .3);
border-radius: 7px;
}
.promo-nav li {
float: left;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
}
/* 不要忘记选择器权重的问题 */
.promo-nav .selected {
background-color: #ff5000;
}
style>
head>
<body>
<div class="tb-promo">
<img src="images/tb.jpg" alt="">
<a href="#" class="prev"> < a>
<a href="#" class="next"> > a>
<ul class="promo-nav">
<li class="selected">li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
body>
html>
通过盒子模型,清楚知道大部分html标签是一个盒子
通过 CSS 浮动、定位可以让每个盒子排列成为网页
一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法
1.标准流
可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
3.定位
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!
本质:让一个元素在页面中隐藏或显示出来
display 属性用于设置一个元素应如何显示
display: none;
隐藏对象display: block;
除了转换为块级元素之外,同时还有显示元素的意思display 隐藏元素后,不再占有原来的位置
应用广泛,搭配 JS 可以做很多的网页特效
visibility 属性用于指定一个元素应可见还是隐藏
visibility: visible;
元素可视
visibility: hidden;
元素隐藏
visibility 隐藏元素后,继续占有原来的位置
visibility:hidden
display:none
(用处更多 重点)overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么。
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。
但是如果有定位的盒子,请慎用 overflow:hidden
因为它会隐藏多余的部分。
示例:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>仿土豆网显示隐藏遮罩案例title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.mask {
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
/* 当我们鼠标经过了 土豆这个盒子,就让里面遮罩层显示出来 */
.tudou:hover .mask {
/* 而是显示元素 */
display: block;
}
style>
head>
<body>
<div class="tudou">
<div class="mask">div>
<img src="images/tudou.jpg" alt="">
div>
body>
html>