css基础知识4 补充

最新推荐文章于 2021-10-15 22:54:32 发布

全栈开发ck

最新推荐文章于 2021-10-15 22:54:32 发布

阅读量918

点赞数 11

分类专栏：初始化前端文章标签： css

本文链接：https://blog.csdn.net/weixin_44954172/article/details/91884785

版权

前端同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

初始化

20 篇文章 0 订阅

订阅专栏

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;
}

2018-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+

2018-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>

2018-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>

2018-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：移动
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;
}

动画

全栈开发ck

关注

11
点赞
踩
23

收藏

觉得还不错? 一键收藏
4
评论
css基础知识4 补充

CSS笔记如何引用css样式内联样式<html><head> <style> h1{ color: red; } </style></head><body> <h1>标题1</h1></body></html&gt...
复制链接

扫一扫