CSS笔记
如何引用css样式
内联样式
<html>
<head>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>标题1</h1>
</body>
</html>
外联样式 link
新建的样式文件扩展名是.css
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>标题1</h1>
</body>
</html>
设置浏览器地址栏上的小图标
<head>
<title>Document</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
type
属性可以省略,rel
属性不可以省略
行内样式 style
<h1 style="color:yellow">标题1</h1>
注意:
css
是一门静态语言
导入@import url
<style>
/*导入css*/
@import url("css/style.css");
</style>
css link和@import区别用法
1、link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
2、link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
3、link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
4、link支持使用Javascript控制DOM去改变样式;而@import不支持。
css选择器
id选择器
<style>
#red{
color: red;
}
</style>
<h1 id="red">标题1</h1>
class(类)选择器
<style>
.green{
color: green;
}
</style>
<h1 class="green">标题1</h1>
<h2 class="green">标题2</h2>
tag(标签)选择器
<style>
h1{
color: blue;
}
</style>
<h1>标题1</h1>
attr(属性)选择器
<style>
[name="h1"]{
color: orange;
}
</style>
<h1 name="h1">标题1</h1>
<h2 name="h1">标题2</h2>
属性选择器支持通配符:
^
以什么字符开头
<style>
[class ^= "fa"]{
color: pink;
}
</style>
<div class="fa add ">标题1</div>
<div class="fa remove">标题2</div>
$
以什么字符结尾
<style>
[class $= "fa"]{
color: yellow;
}
</style>
<div class="add fa">标题1</div>
<div class="remove fa">标题2</div>
*
包含什么字符(开头和结尾都算)
<style>
[class *= "fa"]{
color: cyan;
}
</style>
<div class="ok fa add">标题1</div>
<div class="no fa remove">标题2</div>
:before (伪类) 选择器
<style>
/* 默认 */
a:link{
color: blueviolet;
text-decoration: none;
}
/* 单击过后 */
a:visited{
color: gray;
}
/* 鼠标滑过 */
a:hover{
text-decoration: underline;
}
/* 单击一瞬间 */
a:active{
line-height: 2;
}
</style>
<a href="#">超级链接</a>
注意:超级链接伪类样式定义的顺序是
LVHA
,也就是Link
->Visited
->Hover
->Active
level(层级或者关系) 选择器
<style>
/* 空格是指box内部所有的后代都算 */
.box h2{
color: coral;
}
/* 大于是指box内部一级后代都算 */
.box > h2{
color: red;
}
/* 注意之间没有空格,表示two和box是属于同一个元素的类 */
.box.two{
color: palevioletred;
}
/* box后面紧跟加号,代表 加号后面的元素是box元素的下面同辈的第一个元素。 */
.box + h4{
color: chartreuse;
}
/* box后面紧跟星号,代表 星号后面的元素是box元素的下面同辈的所有元素。 */
.box ~ *{
color:chocolate;
}
</style>
<div class="box two">
<h2>标题</h2>
<p>段落</p>
<ul>
<li>
<h2>标题2</h2>
</li>
</ul>
</div>
<h4>标题4</h4>
<p>段落1</p>
<p>段落2</p>
<span>连接</span>
* (通配符) 选择器
- 要慎用此选择器,因为它会造成一定的性能开销
* {
margin: 0;
padding: 0;
}
2019-6-10
选择器优先级
!important
- 行内样式
style
id
class
类 和attr
属性是相同优先级tag
标签- 默认样式
<style>
#box{
color: red;
}
.box{
color: blue;
}
[name="box"]{
color: blueviolet;
}
div{
color: green !important;
}
</style>
<div id="box" class="box" name="box" style="color: cyan">
文字文字
</div>
css定义的权重
tag
标签的权重为1
class
类的权重为10
id
的权重为100
<style>
.nav li{
display: inline;
color: blue;
}
.active{
color: red;
}
</style>
<ul class="nav">
<li>首页</li>
<li class="active">关于我们</li>
<li>联系我们</li>
</ul>
以上代码,因为.nav
是类,它的权重是10
,li
是标签,它的权重是1
,所有.nav li
加起来的权重就是11
,而.active
是类,权重为10
,10
小于11
,所以active
类的红色无法覆盖。
正确写法如下:
<style>
.nav li{
display: inline;
color: blue;
}
.nav li.active{
color: red;
}
</style>
<ul class="nav">
<li>首页</li>
<li class="active">关于我们</li>
<li>联系我们</li>
</ul>
可继承和不可继承属性
可继承属性
color
颜色属性
不继承color属性的标签:
a
超级链接button
按钮input
输入框select
下拉框textarea
多行输入框
-
font-size
字体大小属性不继承
font-size
属性的标签:button
按钮input
输入框select
下拉框textarea
多行输入框
-
font-family
字体属性不继承
font-family
属性的标签:button
按钮input
输入框select
下拉框textarea
多行输入框
-
line-height
行高 -
UL LI DL DD DT
项目列表
不可继承属性
border
: 边框width
:宽height
: 高margin
: 边距padding
:填充
css 样式规则
命名
字母(或者_-)开头,后面允许数字、字母、下划线、中横杠
以下是错误的css
命名
.1red{
color:red;
}
.222{
color:red;
}
.@abc{
color:red;
}
.abc cd{
color:red;
}
.abc{
color:green;
}
.ab-cd{
color:green;
}
.AB-CD{
color:green;
}
.ab_cd{
color:green;
}
.ab123{
color:green;
}
注意:css命名严格区分大小写,建议一律小写
语法规则
属性名: 属性值;
错误的写法
/*使用了中文的冒号*/
.abc{
color:red;
}
/*使用了等于号*/
.abc{
color = red
}
/*使用了中文的分号*/
.abc{
color: red;
}
/*使用了逗号分割属性,应该是分号*/
.abc{
color: red,
font-size: 12px
}
/*没有使用分号分割属性,注意最后一个属性可加分号,也可以省略*/
.abc{
color: red
font-size: 12px
}
正确的写法
.abc{
color:red;
font-size:12px;
}
文本
对文字进行一系列修饰的属性
color
:颜色(4种表达)font-size
:文字大小 (px
、%
、em
、rem
、vw
、vh
)
注意:各大主流浏览器默认字体大小通常是
16px
px、em、rem的区别
px
称为像素,它是一种抽象的单位,在谷歌中文浏览器下,最小不能小于12px
。
em
它是相对的单位,它始终是相对父元素继承过来的字体大小作为参考大小。
<style>
div{
font-size: 30px;
}
span{
color:red;
font-size: 1em;
}
</style>
<div>
<p>
<span>文本</span>
</p>
</div>
rem
它是相对的单位,相对根元素html
的参考大小的一种单位。
注意:后期学习响应式布局,我们推荐使用
rem
作为首选单位,因为我们可以通过调整html
根元素的字体大小,来确保页面中所有字体大小是等比例的放大缩小关系。
vw
它是相对的单位,表示可视宽,注意它大小不是一成不变
vh
它是相对的单位,表示可视高,注意它大小不是一成不变
注意:块元素的宽度默认相当于
100%
,所有不需要手动设置width:100%
,然后块元素的高度100%
,是需要从直接父元素中高度(实值)得到的。
<style>
/* 第1步 */
html{
height: 100%;
}
/* 第2步 */
body{
height: 100%;
}
/* 第3步 */
div{
background-color: red;
height: 100%;
/* 如果使用100vh则不需要第1-2步 */
}
</style>
<div>
文字
</div>
-
font-weight
加粗属性bold
加粗600
加粗normal
不加粗
-
font-style
斜体属性italic
斜体normal
不倾斜
-
font-variant
属性设置小型大写字母,normal
正常
<style>
span{
color: red;
font-size: 30px;
}
.small{
font-variant: small-caps;
}
</style>
<span>abcde</span>
<span class="small">abcde</span>
font-family
:定义字体的属性
注意:字体定义不是随心所欲的定义,要考虑兼容情况,它有一套后备机制。
elementUI
团队字体定义方案:
body{
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
antd
团队字体定义方案:
body{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
}
text-transform
:文本转型capitalize
首字母大写lowercase
一律小写uppercase
一律大写none
不应用转型
text-decoration
:文本用线修饰
none
: 无修饰线overline
:上划线line-through
:中划线underline
:下划线
<style>
span{
font-family: sans-serif;
font-size: 30px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
text-transform: capitalize;
text-decoration: underline;
color: red;
}
</style>
<span>abcde cdddddd</span>
text-align
:文本对齐
可以使用text-align
对齐的元素:
- 文本
- 行内标签
span
、b
、em
- 行块标签
img
、video
、input
<style>
div{
width: 200px;
height: 200px;
background-color: red;
text-align: center;
}
</style>
<div>
<span>你好</span>
</div>
居中对齐演示
<style>
div{
width: 200px;
height: 200px;
background-color: red;
text-align: justify;
}
div p{
width: 100px;
background-color: green;
margin-left: auto;
margin-right: auto;
}
</style>
<div>
<p>文字</p>
</div>
left
:左对齐center
:居中对齐right
:右对齐justify
:两端对齐
两端对齐示例
<style>
div{
width: 300px;
text-align: justify;
}
</style>
<div>
<p>于人谈“契约”,于己忙“弃约”,这就是当前美国一些政客在世人眼中的形象。这些人口头上将所谓契约精神奉为圭臬,孰不知高高在上、颐指气使的行为举止同真正的契约精神格格不入,挖了一个个“弃约陷阱”的同时,他们也在撕下自己脸上的假面具。</p>
</div>
text-indent
:文本缩进属性
<style>
div{
width: 300px;
text-align: justify;
text-indent: 2em;
}
</style>
<div>
<p>于人谈“契约”,于己忙“弃约”,这就是当前美国一些政客在世人眼中的形象。这些人口头上将所谓契约精神奉为圭臬</p>
<p>于人谈“契约”,于己忙“弃约”,这就是当前美国一些政客在世人眼中的形象。这些人口头上将所谓契约精神奉为圭臬</p>
</div>
提示:
text-indent
有时候也会用在seo优化上,使得文字不显示。
<style>
a.logo{
display: inline-block;
text-indent: -999em;
}
</style>
<a href="#" class="logo">思诚科技</a>
white-space
:强制不换行
<style>
div{
width: 200px;
background-color: red;
}
div p{
white-space: nowrap;
}
</style>
<div>
<p>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式</p>
</div>
text-overflow
:文本溢出处理ellipsis
表示溢出后使用...
单行文本溢出省略效果
<style>
div{
background-color: red;
width: 300px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
<div>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
</div>
word-break
:强制换行
当书写一些连续的字符时,它不会换行,那么需要强制换行
<style>
div{
width: 300px;
background-color: red;
word-break: break-all;
}
</style>
<div>你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你</div>
强制换行推荐下面的写法
div{
word-wrap: break-word;
word-break: normal;
}
text-shadow
: 文字阴影
语法:
text-shadow: x轴偏移 y轴偏移 blur模糊度 颜色值
<style>
span{
text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
}
</style>
<span>你好</span>
注意:文字阴影兼容是
IE9+
2019-6-11
line-height
:行高
<style>
ul li{
line-height: 40px;
font-size: 16px;
}
</style>
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
注意:正文我们推荐行高采用倍数设置,1代表一个字体高度,这样的好处就是字体放大,行高也跟着放大,保持比例关系,好看。
行高一般应用在单行定高垂直居中
<style>
div{
width: 200px;
line-height: 50px;
background-color: blueviolet;
}
</style>
<div>
文字
</div>
不定高单行垂直居中解决方案
<style>
div{
width: 200px;
padding-top: 10px;
padding-bottom: 10px;
background-color: blueviolet;
}
</style>
<div>
文字<br>
文字<br>
文字<br>
文字<br>
</div>
多行文字垂直居中解决方案
<style>
div{
display: table;
width: 200px;
height: 400px;
background-color: blueviolet;
color: white;
}
div span{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div>
<span>
文字<br>
文字<br>
文字<br>
文字<br>
</span>
</div>
text-size-adjust
:设置移动端页面中对象文本的大小调整
在ios下你横屏或者竖屏时,浏览器会调整你的字体大小,这样的体验并不好,所以我通常设置none
html{
/*不允许调整文本大小*/
text-size-adjust: none;
}
user-select
:用户选择对象
body{
/* 表示整个文档禁止选择文本 */
user-select: none;
}
伪类和伪元素
:link
:超级链接默认颜色:visited
:超级链接单击过后颜色:hover
:元素划过状态:active
:元素单击一瞬间状态
<style>
p:hover{
color: brown;
}
p:active{
color: green;
}
</style>
<p>文本</p>
before
:在元素内部的前面创建一个伪元素
<style>
p:before{
content: "?";
font-size: 30px;
vertical-align: middle;
}
</style>
<p>文本</p>
after
:在元素内部的后面创建一个伪元素
<style>
p:after{
content: "?";
font-size: 30px;
vertical-align: middle;
}
</style>
<p>文本</p>
:first-child
:查找目标元素内部第一个子元素:last-child
:查找目标元素内部最后一个子元素:nth-child(n)
:查找目标元素内部指定序号的元素,序号还支持倍数关系
nth-child
中n
可能存在的值:
- 纯数字:代表指定的序号
- 数字加n:代表改数字的倍数,2n表示匹配 2、4、6、8、10…
- even:偶数
- odd:奇数
- 数字加n加数字:例如 2n+1,n起步是0
<style>
ul li:first-child{
color: red;
}
ul li:last-child{
color: green;
}
ul li:nth-child(2n+1){
color: blue;
}
</style>
<ul>
<li>首页</li>
<li>关于</li>
<li>产品</li>
<li>联系</li>
</ul>
:checked
:选择所有选中的表单元素
<style>
input:checked{
display: none;
}
</style>
<input type="radio"> 男
<input type="radio" checked> 女
:disabled
:选择所有禁用的表单元素
<style>
button:disabled{
cursor: not-allowed;
}
</style>
<button disabled>提交</button>
:empty
:选择所有没有子元素的p元素
<style>
div p:empty{
height: 50px;
background-color: red;
}
</style>
<div>
<p>段落1</p>
<p></p>
<p>段落2</p>
</div>
:first-of-type
:选择的每个 指定元素是其父元素的第一个指定元素
<style>
div p:first-of-type{
color: red;
}
</style>
<div>
<span>文本1</span>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
:last-of-type
:选择的每个 指定元素是其父元素的最后一个指定元素
<style>
div p:last-of-type{
color: red;
}
</style>
<div>
<span>文本1</span>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<span>文本2</span>
</div>
:not(selector)
:选择所有指定元素以外的元素
<style>
div p:not(.two){
color: red;
}
</style>
<div>
<p>段落1</p>
<p class="two">段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
:only-child
:选择所有仅有一个子元素的指定元素
<style>
div :only-child{
color: red;
}
</style>
<div>
<span>文本</span>
</div>
:root
: 选择文档的根元素
html中文档的根元素始终是html
:root{
font-size: 15px;
}
/* 以上代码相当于 */
html{
font-size: 15px;
}
:focus
:选择获得焦点的元素
<style>
input{
border: 1px solid #ccc;
outline: none;
}
input:focus{
border: 1px solid red;
}
</style>
<input type="text" placeholder="请输入用户名!">
:selection
:获得选择文本的对象
<style>
::selection{
background-color: orange;
color: red;
}
</style>
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
注意:此伪类必须使用双冒号,单冒号不会执行
- 美化滚动条系列伪类
::-webkit-scrollbar
滚动条整体部分::-webkit-scrollbar-thumb
滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)::-webkit-scrollbar-track
滚动条的轨道(里面装有Thumb)::-webkit-scrollbar-button
滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece
内层轨道,滚动条中间部分(除去)::-webkit-scrollbar-corner
边角,即两个滚动条的交汇处::-webkit-resizer
两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
<style>
::-webkit-scrollbar{
width: 6px;
background-color: #ddd;
}
::-webkit-scrollbar-thumb{
background-color: rgb(70, 114, 155);
border-radius: 3px;
}
.box{
width: 200px;
height: 200px;
background-color: #ccc;
overflow: auto;
}
</style>
<div class="box">
<p> 默认情况下,选择网站文本都是深蓝的背景,白色的字体,那么我们如何在浏览</p>
<p> 默认情况下,选择网站文本都是深蓝的背景,白色的字体,那么我们如何在浏览</p>
<p> 默认情况下,选择网站文本都是深蓝的背景,白色的字体,那么我们如何在浏览</p>
<p> 默认情况下,选择网站文本都是深蓝的背景,白色的字体,那么我们如何在浏览</p>
</div>
::placeholder
:用来设置placeholder属性的样式
<style>
input{
color: red;
}
::placeholder{
color: green;
font-family: "华文行楷";
}
</style>
<input type="text" placeholder="请输入密码">
背景
background-color
:背景颜色
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div>
文本
</div>
background-image
:设置背景图像
默认背景图像填充方式是水平垂直平铺的
<style>
div{
width: 500px;
height: 500px;
background-image: url(images/bg.png);
}
</style>
<div>文本</div>
background-repeat
:设置背景图标重复方式
no-repeat
:不重复repeat
:重复,水平垂直平铺,默认repeat-x
:水平重复repeat-y
:垂直重复round
:拉伸背景图像,使它完全贴合宽和高
<style>
div{
width: 500px;
height: 500px;
background-image: url(images/bg.png);
background-repeat: no-repeat;
}
</style>
<div>文本</div>
background-position
:用于背景图像对齐,总共有9种对齐方位
left top
: 用百分比代替 是0 0
left center
: 用百分比代替 是50% 0
left right
: 用百分比代替 是100% 0
center top
: 用百分比代替 是50% 0
center center
: 用百分比代替 是50% 50%
right top
: 用百分比代替 是100% 0
20px 20px
: 坐标原点是左上角(0,0),在第4象限,支持负数的值。
注意:推荐使用百分比作为对齐方案,因为兼容性更好
background-attachment
:设置背景图片跟随页面是否滚动
scroll
:跟随页面滚动,默认fixed
:固定,不跟随页面滚动。
注意:
scroll
效果只在body
元素上才能有所体现
background-attachment:fixed
注意应用在一些视觉差效果体验上
background-size
:设置背景图像的尺寸
cover
:封面,让背景图片自动完整匹配指定的宽和高,背景图有可能被裁切contain
:包含,将背景图片自动等比例缩放到容器中,可能会造成没有完全铺满的情况,但被图片不会被裁切100% auto
: 也可以自己设置指定的值,来调整背景图片尺寸,单位可以使用%
、px
<style>
div{
width: 300px;
height: 300px;
background-color: #ccc;
background-image: url(images/1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
</style>
<div>
<p>文本</p>
</div>
- 多个背景图像
多个背景图片采用英文逗号分割,其它背景图片属性,也采用英文逗号分割。
<style>
div{
width: 300px;
height: 300px;
background-color: #ccc;
background-image: url(images/bg.png),url(images/smile.svg);
background-repeat: no-repeat,repeat;
background-position: 60px 60px,30px 30px;
}
</style>
<div>
<p>文本</p>
</div>
注意:排第一个位置背景图片,在最高层,层级顺序依次递减。
- 背景图片使用渐变填充
- 线性渐变
语法
background-image: linear-gradient(方向, 颜色点, 颜色点, ...);
水平垂直方向有以下方位:
to bottom
:从上到下to top
:从下到上to right
:从左到右to left
:从右到左
<style>
div{
width: 100px;
height: 100px;
background-image: linear-gradient(to right,red, blue);
}
</style>
<div>线性渐变效果</div>
对角方向有以下方位:
to left top
:到左上to left bottom
:从左下to right top
:到右上to right bottom
:从右下
方向也可以使用角度:
语法:
background-image: linear-gradient(角度, 颜色点, 颜色点, ...);
<style>
div{
width: 100px;
height: 100px;
background-image: linear-gradient(45deg,blue, orange);
}
</style>
<div>线性渐变效果</div>
线性渐变绘制几何图形效果
<style>
body{
padding: 50px;
}
.box{
width: 300px;
height: 300px;
background-image:
linear-gradient( 45deg, transparent 50%,red 50.5%, transparent 50.5%),
linear-gradient( -45deg, transparent 50%,red 50.5%, transparent 50.5%),
linear-gradient( 0, transparent 298px ,red),
linear-gradient( 180deg, transparent 298px,red),
linear-gradient( 90deg, transparent 298px,red),
linear-gradient( -90deg, transparent 298px,red)
}
</style>
<div class="box"></div>
2019-6-12
- 径向渐变
语法:
background: radial-gradient(center, 渐变形状, 颜色点, 颜色点 );
渐变形状:
circle
:圆形ellipse
:椭圆
注意:椭圆和宽度高度有关系,如果宽高相等,则不会形成椭圆效果
<style>
div.box{
width: 300px;
height: 300px;
background-image: radial-gradient(red 10%,green 20%);
}
</style>
<div class="box"></div>
background-clip
:
语法
background-clip: border-box|padding-box|content-box;
background-clip
属性:
border-box
:背景被裁剪到边框盒 默认。padding-box
:背景被裁剪到内边距框。content-box
:背景被裁剪到内容框。
<style>
div{
width: 200px;
height: 200px;
background-image: url(images/bg.png);
background-clip: content-box;
padding: 20px;
border: 10px solid rgba(0, 255, 0, .5)
}
</style>
<div>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>
background-origin
:规定background-position
属性相对于什么位置来定位
padding-box
:背景图像相对于内填充来定位 默认。border-box
:背景图像相对于边框盒来定位。content-box
:背景图像相对于内容框来定位。
盒子
box-sizing
:盒子模型
border-box
:边框盒子,实际宽度 = 基础宽,也就是填充宽和边框宽往内算content-box
: 内容盒子,默认,实际宽度 = 基础宽 + 填充宽 + 边框宽,也就是填充宽和边框宽往外算
<style>
.box1,
.box2{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: 10px solid black;
}
.box1{
box-sizing: content-box;
}
.box2{
box-sizing: border-box;
}
</style>
<div class="box1">
content-box
</div>
<br><br>
<div class="box2">
border-box
</div>
使用border-box
写的一个底部导航模块效果
<style>
body{
padding: 50px;
}
.footnav{
width: 360px;
background-color:#fff;
margin-left: auto;
margin-right: auto;
border-top: solid 1px #ccc;
}
.footnav a{
box-sizing: border-box;
display: inline-block;
width: 25%;
border-right: solid 1px #ccc;
line-height: 46px;
text-decoration: none;
color: inherit;
text-align: center;
}
.footnav a.active,
.footnav a:hover{
background-color: #ccc;
}
.footnav a:last-child{
border-right: none;
}
</style>
<!-- footnav start -->
<nav class="footnav">
<a href="#">首页</a><a href="#">关于</a><a href="#" class="active">购物</a><a href="#">联系</a>
</nav>
<!-- footnav end -->
盒子模型涉及那些属性?
width
:宽度,单位(px
、%
、em
、rem
、vw
)height
:高度,单位(px
、%
、em
、rem
、vw
)
<style>
html {
font-size: 15px;
}
.box {
width: 20rem;
height: 20rem;
background-color: red;
}
</style>
<div class="box"></div>
padding
:内填充,给元素内部加上距离。
padding缩写
- 单个属性的写法
.box{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
- 四个值相同
.box{
/* 注意顺序是 上 右 下 左 */
padding: 20px 20px 20px 20px;
}
/* 缩写为 */
.box{
padding: 20px;
}
- 上下相同,左右相同
.box{
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
}
/* 缩写为 */
.box{
/* 第1个位置表示上下,第2位置表示左右 */
padding: 20px 30px;
}
- 上下不相同,左右相同,可以省略右
.box{
/* 注意顺序是 上 右 下 左 */
padding: 20px 15px 25px 15px;
}
/* 缩写为 */
.box{
padding: 20px 15px 25px;
}
margin
:外边距,给元素外部加上距离。
margin
外边距它缩写规则同padding
内填充是一样的。
margin-top
带来的问题
margin-top
经常会出现错误的外边距效果,那么解决此问题的办法是,给这个父元素设置overflow: hidden
具体解决方案,如下
<style>
.box {
width: 500px;
height: 500px;
background-color: red;
overflow: hidden;
}
.small-box{
margin-left: 50px;
margin-top: 50px;
width: 200px;
height: 200px;
background-color: green;
}
</style>
<div class="box">
<div class="small-box">
文本
</div>
</div>
注意:能使用
padding-top
,就不用margin-top
margin
允许使用负值,表示抵消外边距
<style>
body{
padding: 20px;
}
.nav{
background-color:white;
border-bottom: 4px solid #000;
}
.nav a{
padding-left: 30px;
padding-right: 30px;
display: inline-block;
line-height: 60px;
font-size: 20px;
text-decoration: none;
text-align: center;
color: inherit;
}
.nav a.active{
border-bottom: 10px solid orange;
margin-bottom: -4px;
}
</style>
<div class="nav">
<a href="#">首页</a>
<a href="#" class="active">关于</a>
</div>
2019-6-13
边框和轮廓
border
:设置边框
border-width
:设置边框的粗细,单位可以使用(px、em、rem)等border-style
: 设置边框的线型dotted
点划线solid
实线double
双线groove
凸凹线
border-color
:设置边框的颜色border-image
:设置边框的背景border-radius
:设置边框的圆角border-方向-属性
:设置边框指定方向某属性样式
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
border-width: 10px;
border-style: groove;
border-color: green;
}
</style>
<div class="box"></div>
使用css
制作三角形效果
<style>
.arrow{
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-top-width: 8px;
border-bottom-width: 8px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: green;
}
</style>
<div class="arrow"></div>
outline
和border
区别:
- 显示的位置不同,
outline
外边框,border
内边框 outline
不占文档流位置,不会因为设置了宽度而影响紧挨的元素位置
我们可以利用outline清除表单默认的蓝色外轮廓线
input{
outline:none;
}
css中缩写
- 颜色缩写
.box{
color: #fff;
/* 实际为 #ffffff */
}
.box{
color: #f60;
/* 实际为 #ff6600 */
}
- 字体缩写
<style>
.fa{
/* font-family: 华文行楷; */
/* font-size: 30px; */
/* font-weight: normal; */
/* font-style: italic; */
/* line-height: 2; */
/* 缩写 */
font: italic normal 30px/2 "华文行楷";
color: orange;
}
</style>
<h2 class="fa">标题2</h2>
- 可省略的:
style
倾斜、weight
加粗、行高 - 不可省略的:
size
尺寸、family
字体
注意:
size
和family
的位置是不能随意乱放的,size
一定要在family
的前面,并且size
和family
必须写在所用属性的最后。
- 背景缩写
.bg{
/*
background-color: green;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
*/
/*缩写*/
background: green url(images/bg.png) no-repeat 50% 50%/contain;
width: 200px;
height: 200px;
}
- 背景颜色可以省略
- 填充和边距缩写
/* 四个填充相等 */
.box{
padding: 20px;
/* 实际为 padding: 20px 20px 20px 20px; */
}
/* 上下填充相等,左右填充相等 */
.box{
padding: 20px 30px;
/* 实际为 padding: 20px 30px 20px 30px; */
}
/* 上下不相等,左右相等 */
.box{
padding: 20px 15px 10px;
/* 实际为 padding: 20px 15px 10px 15px; */
}
- 边框缩写
.box{
width: 100px;
height: 100px;
background-color: red;
/*
border-width: 10px;
border-style: groove;
border-color: green;
*/
/*缩写*/
border: groove 1px green;
}
/* 圆角缩写 */
.box{
/*
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
*/
/*缩写*/
border-radius: 4px;
}
显示隐藏 (光标)
显示
block
:显示为块元素inline
:显示为行内元素inline-block
:显示为行块元素table
:显示为表格table-cell
:显示为表格单元格list-item
:显示为列表项目
隐藏
display: none
:隐藏元素visibility: hidden
:元素不可见opacity: 0
:元素透明
display
和 visibility
和 opacity
的区别
display
:隐藏,不在文档流,无法获取宽和高visibility
:不可见,在文档流,可以获取宽和高,不支持事件opacity
:透明,在文档流,可以获取宽和高,也支持事件
溢出 overflow
hidde
:溢出隐藏visible
:溢出可见 默认scroll
:溢出显示滚动条auto
:溢出自动根据宽高决定是否显示滚动条overflow-x
: 水平溢出处理overflow-y
:垂直溢出处理
<div class="box">
<p>文本</p>
<p>文本</p>
<p>文本</p>
<p>文本</p>
<p>文本</p>
<p>文本</p>
<p>1111111111111111111111111111111111111111111111111111111111111111111111111</p>
</div>
光标 cursor
default
:箭头 默认pointer
:手型help
:帮助wait
:忙,加载中move
:移动not-allowed
:禁止s-resize
:垂直调整w-resize
:水平调整se-resize
:对角线调整ne-resize
:对角线调整
布局(浮动、定位)
浮动布局 float
left
:浮左right
:浮右none
:不浮动
注意:当子元素统统设置浮动后,那么浮动的元素会脱离文档流,所有元素脱离了文档流,因为内部没有元素撑起来,就会导致父元素高度塌陷(高度为0)
清除浮动的办法:
-
height
:父元素设置高度缺点:直接设置高度,如果内容增加的话,那么父元素高度不会跟随
-
clear:both;
: 父元素内尾部加额外块标签,并设置clear:both
缺点:为了清除浮动,额外增加一个块级标签
-
overflow:hidden
:利用bfc
原理来清除浮动缺点:清除浮动非常简单,但是会溢出隐藏。
-
::after
:使用伪类清除浮动缺点:不需要额外增加标签,也不会导致溢出隐藏,但代码实习有些多
/* 高度清除浮动 */
ul{
height: 300px;
}
/* 利用bfc机制清除浮动 */
ul{
overflow: hidden;
}
/* 伪类清除浮动 */
ul::after{
display: block;
content: " ";
clear: both;
font-size: 0;
visibility: hidden;
height: 0;
line-height: 0;
}
CSS布局建议
- 通俗易懂的命名方式,时刻考虑会不会全局污染其他类名
- 用简洁清晰语义化的结构
- 内部宽高决定外部宽高
- 少用float布局,可以用inline-block代替
- 设置float了,必须清除浮动
- css代码命名语义化,模块化
- 用rem代替px
- 尽量用padding-top代替margin-top
定位 position
static
:静态定位 默认relative
:相对定位absolute
:绝对定位fixed
:固定定位sticky
: 粘性定位
static
静态定位
- 没有脱离文档流
- 不支持top、right、bottom、left、z-index属性
relative
相对定位
- 没有脱离文档流
- 支持top、right、bottom、left、z-index属性
absolute
绝对定位
- 脱离文档流
- 支持top、right、bottom、left、z-index属性
- 跟随页面滚动
- 如果它的父元素没有任何定位(绝对、相对、固定),那么默认相对于
body
偏移 - 如果它的父元素设置了定位,那么相对于最近的定位(绝对、相对、固定)偏移。
fixed
固定定位
- 脱离文档流
- 支持top、right、bottom、left、z-index属性
- 固定页面中
- 始终相对于
窗口
偏移