css笔记

最新推荐文章于 2024-05-20 02:26:37 发布

奋斗的小面包

最新推荐文章于 2024-05-20 02:26:37 发布

阅读量936

点赞数

分类专栏： css3 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/c1523456/article/details/127640806

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css笔记

css 样式规则

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

css字体样式属性

font-size:字号大小

font-family:字体

常用技巧

现在网页中普遍使用14px
尽量使用偶数的数字字号，ie6等老式浏览器支持奇数会有bug
各种字体之间必须使用英文状态下的逗号隔开
中文字体需要加英文状态下的引号，英文字体一般不需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前
如果字体中包含空格，#，$,等符号，则该字体必须加英文状态下的单引号或者双引号，
尽量使用系统默认字体，保证在任何用户的浏览器中都能正常显示

在css中设置字体名称，可以直接写中文的字体名称，但是在文件编码不匹配时，会产生乱码错误，如xp系统不支持类似微软雅黑的中文。

方案一：使用英文来代替

方案二：使用unicode编码

常见的字体名称及英文和Unicode编码

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

font-weight:字体粗细

属性值	描述
normal	默认值。定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold
inherit	规定应该从父元素继承字体的粗细

常用技巧

我们一般使用400 表示不加粗，700 表示加粗，并且粗细我们一般喜欢使用数字来表示。

font-style：字体风格

属性值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

font:综合设置字体样式

选择器 {
    font: font-style font-weight font-size/line-height font-family;
}

注意事项

使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（默认会取用默认值），但是必须保留font-size 和font-family属性，否则font属性将不起作用。

css注释

/*这是一段注释*/

选择器

标签选择器

p {
    color:red;
}

类选择器

<style>
/*声明css样式类型*/
.className {
    color:red;
}
</style>
<!-- 引入类样式-->
<h1 class="className"></h1>

多类选择器

<style>
.className1 {
    color:red;
}
.className2 {
    font-size:10px;
}
</style>
<h1 class="className1 className2"></h1>

注意事项

样式显示效果跟html元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关
各个类名中间用空格隔开

ID选择器

<style>
#id1 {
    
}
id2 {
    
}
</style>
<h1 id="id1"></h1>

ID选择器和类选择器的区别，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class对象出现。

通配符选择器

<style>
* {
    color: red;
}
</style>

伪类选择器

链接伪类选择器

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
<a href="#">链接</a>

注意

上面的顺序严格一致，不能颠倒顺序

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

结构伪类选择器

:first-child   选中同级第一个并且为xxx的元素
:last-child   选择所有元素的最后一个子元素
:nth-child(n)  选择所有元素倒数的第N个子元素
:nth-last-child(n)  选择所有元素倒数的第N个子元素
:nth-of-type(3)  选择指定的元素
:last-of-type
:first-of-type
:nth-last-of-type
:only-child 选择的元素是他的父元素的唯一一个子元素
:only-of-type 选择一个元素是他的上级元素的唯一一个相同类型的子元素
:empty 选择的元素里面没有任何内容

整数类型

p:nth-child(2)
{
    background:#ff0000;
}

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：

p:nth-child(odd)   /*奇数个*/
{
    background:#ff0000;
}
p:nth-child(even)   /*偶数个*/
{
    background:#0000ff;
}

使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：

p:nth-child(3n+0)
{
    background:#ff0000;
}

伪类的结构选择器的一些说明

关于会选取哪个标签元素我们通常会有误解，注意一句话，选中同级别并且为xx的元素很关键

例如如下代码：

<style>
    p:first-child{
        /* 同级第一个并且为p的元素 */
        color: red;
    }
</style>
<body>
    <h3>0000000</h3>
    <p>1111111</p>
 
    <div>
        <h3>2222222</h3>
        <p>3333333</p>
    </div>
 
    <div>
        <p>4444444</p>
        <p>5555555</p>
    </div>
</body>

css样式会应用到 44444444标签中。

分析：

同级：如上代码。最外层的h3,p,div同级，div里面的h3和p同级，另一个div里的两个p同级

第一个且为p：如上三组中，前两组中第一个元素都是h3，只有第三组中第一个元素为p。所有只选中4！

可以参考如下连接

结构伪类选择器csdn博客文章

目标伪类选择器

:tagert   /*:target选择器可用于当前活动的target元素的样式。*/

状态伪类选择器

intput:enabled {   
    
}
input:disabled {
    
}
radio:checked {
    
}

CSS外观属性

color:文本颜色

color 属性用于定义文本颜色，其取值方式有三种。

预定义的颜色值，如red green blue等
十六进制，如 #ff0000,#ff6600等，实际工作中，十六进制是最常用的定义颜色的方式。
RGB代码，如红色可以表示rgb(255,0,0)或者 rgb(100%,0%,0%) 需要注意的是，如果使用rgb代码的百分比颜色值，取值为0时也不能省略百分号。

line-height：行间距

一般情况下，行距比字号大7.8像素左右就可以了

text-align:水平对齐方式

left: 左对齐(默认)

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent 属性用于设置首行文本缩进，其属性值可为不同单位的数值，em字符宽度的倍数，或相对于浏览器窗口宽度的百分比，允许使用负值，建议使用em作为设置单位。

1em 就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度。

letter-spacing：字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。默认为normal

word-spacing：单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效，letter-spacing和word-spacing均可对英文进行设置，不同的是letter-spacing定义的是字母之间的间距，而word-spacing定义的为英文单词之间的间距。

颜色半透明（css3）

文字颜色到了css3 我们可以采取半透明的格式了，语法格式如下：

color:rgba(r,g,b,a) a是alpha 透明的意思 color:rgba(0,0,0,0.3)

text-shadow:文字阴影 (css3)

text-shadow:水平位置(必须)  垂直位置(必须)  模糊距离(可选)   阴影颜色(可选);

引入CSS样式表的方式

内部样式表

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                color:red;
            }
        </style>
    </head>
    <body>
    </body>
</html>

行内样式表

<!DOCTYPE html>
<html>
	<body>
		<h1 style="color:blue;text-align:center;">This is a heading</h1>
		<p style="color:red;">This is a paragraph.</p>
	</body>
</html>

外部样式表

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="###">
    </head>
	<body>
	</body>
</html>

标签显示模式(display)

块级元素(block-level)

每个块元素通常都会独自占据一整行或多行，可以设置宽度，高度，对齐等属性

常见的块元素有

~

等，其中 div 是最典型的块元素.

块级元素的特点

总是从新行开始
高度，行高，外边距，以及内边距都可以控制
宽度默认是父容器的百分之百
可以容纳内联元素和其他块元素

行内元素（inline-level）

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度高度对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有。

行内元素的特点

和相邻行内元素在一行
高宽无效，但是水平方向可以设置 padding 和margin，垂直方向无效
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素（a特殊）

注意事项

只有文字才能组成段落，因此p里面不能放块级元素，同理还有h1~h6,
链接元素里面不能在放链接元素

行内块元素(inline-block)

行内块元素的特点

和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。
默认宽度是他内容本身。
高度，行高，内边距，外边距都可以控制

例如

标签显示模式转换(display)

块转行内：display:inline

行内转块：display:block

块，行内元素转化为行内块：display：inline-block;

代码实例

<style>
    a {
        display:block; /*转块元素*/
    }
</style>

复合选择器

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。

<html>
    <head>
        <style>
            p.red {
                color:red; /*只有 p元素下 属性为class 为 red 的元素会被选中*/
            }
        </style>
    </head>
    <body>
        <p>
            大可爱
        </p>
        <div class="red">
            小帅哥
        </div>
        <p class="red">小可爱</p>
    </body>
</html>

并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器，class类选择器，id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为他们定义相同的CSS样式。

<html>
    <head>
        <style>
            p,
            div,
            .red {
                color:red; /*只有 p元素下 属性为class 为 red 的元素会被选中*/
            }
        </style>
    </head>
    <body>
        <p>
            大可爱
        </p>
        <div class="red">
            小帅哥
        </div>
        <p class="red">小可爱</p>
    </body>
</html>

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分割，当标签发生嵌套时，内层标签就成为外层标签的后代。

<html>

    <head>
        <style>
            div p {
              background-color: yellow;
            }
        </style>
    </head>
    <body>        
        <div>
           <p>
            大可爱
            </p>
        </div>
    </body>
</html>

子元素选择器

子选择器匹配属于指定元素子元素的所有元素。

div > p {
  background-color: yellow;
}

以上复合选择器练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 连接登录的颜色改为红色*/
        .site-r > a {
            color: red;
        }
        /* 主导航栏所有连接颜色改为蓝色  */
        .nav ul li a {
            color: green;
        }
        /* 主导航栏和测导航栏里面的文字都是14像素并且是微软雅黑 */
        .nav,
        .sitenav{
            font-size: 20px;
            font-family: "宋体";
        }
        /* 一级菜单背景颜色修改 */
        .nav > ul > li > a {
            background-color: rgb(255, 202, 127);
        }
    </style>
    <title>Document</title>
</head>
<body>
   <div class="nav">
        <ul id="nav-ul">
            <li><a href="#">公司首页</a></li>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">公司产品</a></li>
            <li>
                <a href="#">联系我们</a>
                <ul>
                    <li><a href="#">公司邮箱</a></li>
                    <li><a href="#">公司电话</a></li>
                </ul>
            </li>
        </ul>
   </div>
   <div class="sitenav">
        <div class="site-1">左侧测导航栏</div>
        <div class="site-r"><a href="#">登录</a></div>
   </div>
</body>
</html>

属性选择器

方式	含义	示例代码
标签名称[属性名]	选择所有带有 target 属性的元素。	a[targeet]
标签名称[属性名=属性值]	选择器用于选取带有指定属性和值的元素。	a[target=“_blank”]
标签名称[属性名^=属性值]	选择器用于选取指定属性以指定值开头的元素。
标签名称[属性名*=属性值]	选择器选取属性值包含指定词的元素。
标签名称[属性名$=属性值]	选择器用于选取指定属性以指定值结尾的元素。

示例代码

a[target="_blank"] {
    color: red;
}

伪元素选择器

::first-line

伪元素用于向文本的首行添加特殊样式。

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

::first-letter

伪元素用于向文本的首字母添加特殊样式。

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

::selection

伪元素匹配用户选择的元素部分.

p::selection {
  color: red; 
  background: yellow;
}

::after

伪元素可用于在元素内容之后插入一些内容。

h1::after {
  content: url(smiley.gif);
}

::before

伪元素可用于在元素内容之前插入一些内容。

h1::before {
  content: url(smiley.gif);
}

注意：

伪元素:before 或者 :after 添加的内容默认是 inline 元素这两个伪类的content 属性，表示伪元素的内容，设置before 或者after是必须设置content 否则伪元素就不起作用
伪元素是不占位置的

CSS背景(backgrand)

Css 可以添加背景颜色，背景图片，以及来进行图片的设置

属性	说明
backgrand-color	背景颜色
backgrand-image	背景图片
backgrand-repeat	背景平铺
backgrand-position	背景位置
backgrand-attachment	背景是否附着
背景简写	backgrand:背景颜色背景图片地址背景平铺背景滚动背景位置

backgrand-image

body {
    backgrand-image: url("");
}

背景平铺 backgrand-repeat

背景是否平铺

属性值	属性值描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像不重复
inherit	集成父类元素属性值设置

body
  {
      background-image: url(stars.gif);
      background-repeat: repeat-y;
  }

背景位置 background-position

必须先设置 background-image 后在设置 background-position。

属性值	属性值描述
方位词(水平方向 left center right 垂直方向 top center bottom)	如果只指定一个方位的词，则第二个值为center，不区分先后顺序
相对盒子的位置百分比	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
绝对值	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

.imageclass {
            width: 2000px;
            height: 1500px;
            background-color: brown;
            background-image: url(./pic/桌面.png);
            background-repeat: no-repeat;
            background-position: 50% 10px;     /*位置*/
}

背景附着 background-attachment

属性值	属性值描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。

body {
    background-image: url(./pic/桌面.png);
    background-attachment: fixed
}

background:综合设置字体样式

background 属性值的书写顺序官方并没有强制规定，但是为了可读性，建议大家如下写：

background：背景颜色背景图片地址背景平铺背景附着背景位置

background: color url() no-repeat fixed center center;

背景透明（CSS3）

background: rgba(0,0,0,0.3)

background-size背景缩放

属性值	属性值描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

多背景图片

以逗号分割可以设置多背景图片，如果设置的多重背景之间存在交集，前面的背景图片会覆盖之后的背景图片之上。

为了避免背景色将图片覆盖住，背景色通常定义在最后一组。

body {
    background： url("") no-repeat scorll, /*背景色1*/
    			red;    /*背景色2*/
}

凹凸文字效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
       body {
        background-color: #ccc;
       }
       span:first-child {
        color:#ccc;
        font-size: 50px;
        font-family: "宋体";
        text-shadow: 1px 1px 1px black,-1px -1px 1px white;
       }
       span:last-child {
        color:#ccc;
        font-size: 50px;
        font-family: "宋体";
        text-shadow: 1px 1px 1px white,-1px -1px 1px black;
       }
    </style>
    <title>Document</title>
</head>
<body>
  <span>凸文字效果</span>
  <span>凹文字效果</span>
</body>
</html>

导航栏实战

文本装饰 text-decoration

属性值	属性描述
none	默认。定义标准的文本
underline	定义文本下的一条横线
overline	定义文本上的一条横线
line-through	定义穿过文本的一条横线

小技巧，水平居中可以使用 text-aglin 但是垂直居中可以这样做，在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: black;
        }
        a {
            display: inline-block;
            text-decoration: none;
            height: 64px;
            width: 110px;
            text-align: center;
            line-height: 64px;
        }
        a:hover {
            background-color: aliceblue;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <a href="#">游戏资料</a>
    <a href="#">内容中心</a>
    <a href="#">赛事中心</a>
    <a href="#">百态王者</a>
</body>
</html>

CSS的三大特性

层叠继承优先级是我们学习css必须掌握的三大特性

层叠性

所谓层叠性，是指的多种css样式的叠加。

是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉，比如先给某个标签指定一个内部文字颜色为红色，接着又指定一个颜色为蓝色，此时出现一个标签指定了相同的样式的不同的值的情况，这就是样式冲突。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以靠近原则，以最后的样式为准。样式不重叠，不用考虑重叠性。

继承性

所谓继承性，是指书写css样式表时，子标签会继承父标签的某些样式，比如文本颜色，字号，想要设置一个可继承性属性，只需要将它应用于父类元素即可。

注意：

恰当的使用继承性可以简化代码，降低css样式的复杂性。子元素可以继承父类的样式（text-,font-,line- 这些元素开头的都可以继承，以及color属性）

优先级

定义css样式时，经常出现两个或多个规则应用于同一元素上，这时就会出现优先级问题。此时我们就可以通过权重来衡量具体作用于元素上的规则具体是哪一个了。

在考虑权重时，需要注意一些特殊情况，具体如下

继承样式的权重为0。

应用于元素的style属性权重非常高。

权重相同时，css遵循就近原则，也就是靠近元素的样式具有最大的优先级。

css定义了一个!important 命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式的远近，!important 都具有最大的优先级。

#father {
    color: red !important
}

css优先级的权重算法

关于css权重，我们需要一条计算公式来计算，成为 css specificity,我们称为 css特性 或者非凡性,他是一个衡量css值优先级的一个指标。

specificity 用一个4位的字符串来表示，值从左到右，左面的最大，一级大于一级，位数之间没有进制，级别之间没有进制。

选择器	权重值
继承或者*	0,0,0,0
标签选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式	1,0,0,0
!important	无穷大

我们发现，权重值的定义只包含了基础选择器，并没有复合选择器。是因为复合选择器的权重是通过基础选择器的权重值叠加得来的。

比如:

div ul li 的权重值 0,0,0,3

.nav ul li 0,0,1,2 （后代选择器）

a:hover 0,0,1,1

a.nav 0,0,1,1 (交集选择器)

优先级总结

！import 声明的规则
标签 style 属性中声明的规则
id选择器
类选择器属性选择器伪类选择器和伪元素选择器
元素选择器
通用选择器
同类选择器遵循就近原则

盒子模型

内容 - 框的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的。padding
边框 - 围绕内边距和内容的边框。border
外边距 - 清除边界外的区域。外边距是透明的。margin

盒子边框 border

盒子边框宽度 border-width

div {
    border-width: 1px;
}

盒子边框颜色 border-color

div {
    border-color: red;
}

盒子边框风格 border-style

div {
    border-style: dotted;
}

有如下属性值:

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

盒子边框的综合写法 border

分别指定四条边

div {
    border-top-style: xxx;   /*上边框*/
    border-top-width: 1px;
    border-top-color: red;
    border-bottom-style: xxx;  /*下边框*/
    border-bottom-width: 1px;
    border-bottom-color: red;
}

或

div {
    border-top: 边框宽度 样式  颜色; /*边框*/
    border-bottom: 边框宽度 样式  颜色; /*边框*/
    border-right: 边框宽度 样式  颜色; /*边框*/
    border-left: 边框宽度 样式  颜色; /*边框*/
}

或

div {
    border: 边框宽度 样式 颜色;/*边框*/
}

合并边框 border-collapse: collapse

表示边框合并在一起，例如表格边框为1px，而单元格边框为1px，此时我们页面展示的边框宽度为2px，较为粗，可以使用该属性合并，进而显示1px边框。

圆角边框(CSS3) border-radius

border-radius: 左上角 右上角  右下角 左下角;

div {
    border-radius: 10px;  /*四个角都是10px*/
}

div {
    width: 500px;
    height: 500px;
    border-radius: 50%;  /*或 250px此时在正方形中取圆角，就是圆形边框了*/
}

div {
    border-radius: 20px 40px; /*左上角   右下角  是10px  右上角 和 左下角 是  40px  也就是对角*/
}

div {
    border-radius: 20px 40px 80px; /*左上角   10px  右上角 和 左下角 是  40px  也就是对角   右下角 80px*/
}

盒子内边距 padding:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

简写形式

设置值的顺序是顺时针顺序。

设置一个值

div {
  padding: 25px;   /*四个内边距都是25px*/
}

设置两个值

div {
  padding: 25px 50px; /*上下内边距是 25px  左右内边距是50px*/
}

设置三个值

div {
  padding: 25px 50px 75px;/*上下内边距是 25px  左右内边距是50px 下内边距是75px*/
}

设置四个值

div {
  padding: 25px 50px 75px 80x;/*上内边距是 25px  右内边距是50px  下内边距是 75px  左内边距是80px*/
}

新浪导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        nav {
            height: 41px;
            border-top: 4px orange solid;
            border-bottom: 1px rgb(164, 163, 163) solid;
        }
        nav a {
            height: 41px;
            text-decoration: none;
            font-size: 14px;
            text-align: center;
            line-height: 41px;
            font-family: 'Microsoft YaHei', '微软雅黑', SimSun, '宋体';
            padding: 0px 15px;
            display: inline-block;
        }
        nav a:hover {
            background-color: rgb(205, 202, 202);
        }
    </style>
    <title>Document</title>
</head>
<body>
    <nav>
        <a href="">设为首页</a>
        <a href="">手机新浪网</a>
        <a href="">移动客户端</a>
    </nav>
</body>
</html>

盒子外边距 margin

margin属性用于设置外边距。设置的外边距为空白，这段空白通常不能防止其他内容。

margin-top
margin-right
margin-bottom
margin-left

可用的属性值有 auto 浏览器自动计算外边距，length %

margin 的简写形式

取值顺序和内边距相同，也是顺时针旋转取值。

margin 属性设置三个值

p {
  margin: 25px 50px 75px; /*设置上边距25px  右边距和左边距50px  及下边距 75px*/
}

margin 属性设置两个值

p {
  margin: 25px 75px; /*设置上边距下边距25px  右边距和左边距75px*/
}

margin 属性设置1个值

p {
  margin: 25px; /*设置四边为25px*/
}

外边距实现盒子居中

要实现盒子水平居中，需要满足两个条件。

必须是块级元素
盒子必须指定了宽度(width)

完后就可以指定盒子的左右边距为auto了。

div {
    width: 300px;
    margin: auto;   /*盒子水平居中*/
    border: 1px solid red;
}

清除元素的内外边距

为了方便控制页面的元素，制作网页时，可使用如下代码清楚元素的内外边距：

*  {
    margin: 0px;
    padding: 0px;
}

注意：行内元素是只有左右内外边距，是没有上下内外边距的。内边距，在ie6等低版本浏览器中也会有问题。所以行内元素尽量不要给上下的内外边距。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距 margin-bottom，下面元素有上外边距margin-top，则他们之间的垂直间距不是margin-top 和 margin-bottom之和，而是两者中的比较大的一方，这种现象成为相邻块元素垂直外边距的合并 （也称外边距塌陷）。

。

解决方案：避免就好了。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上边距会与子元素的上边距发生合并，合并后的外边距为两者间较大的一个，即使父元素的外边距为0，也会发生合并。

解决方案：

可以为父元素定义一个像素的上边框或上内边距
可以为父元素添加规则 overflow： hidden

盒子模型元素的宽度和高度

使用宽度属性width 和高度属性 height 可以对盒子的大小进行控制。

width 和height 的属性值可以为不同单位的数值或相对于父元素的百分比。

大多数浏览器，如firefox ie6 以及以上版本都采用w3c 规范，复合css规范的盒子模型的总宽度和总高度的计算原则是:

外盒尺寸计算（元素空间尺寸）

空间高度 = content height + padding + border + margin

空间宽度度 = content width + padding + border + margin

内盒尺寸计算（元素大小）

盒尺寸= height + padding + border

盒尺寸 = width + padding + border

注意事项:

height 和 width 只使用用块元素，对行内元素无效（img和input除外）
计算盒子模型的总高度时，还需要考虑外边距合并的形况
如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子的大小

搜索趣图案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        .search {
            color: #7a7a7a;
            height: 300px;
            width: 222px;
            margin: 3px;
            border: 2px solid #dbdee1;
            border-top: 4px solid #ff8400;
        }
        .search h3 {
            font-size: 16px;
            height: 20px;
            font-weight: normal;  
            padding: 6px 6px 6px;
            border-bottom: 1px solid #dbdee1;
            line-height: 20px;
        }
        .search img {
            width: 210px;
            margin: 6px;
        }
        .search ul {
            list-style: none; /*取消掉列表中小点的样式*/
        }
        .search ul li {
            height: 25px;
        }
        .search ul li a {
            color: #7a7a7a;
            font-size: 14px;
            font-style: normal;
            text-decoration: none;
            margin-left: 6px;
            padding-left: 6px;
            line-height: 25px;
            background: url(./pic/icon.png) no-repeat 0 -885px;
        }
        .search ul li a:hover {
            color: #ff8400;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="search">
        <h3>探索趣图</h3>
        <img src="./pic/cam.jpg" alt="相机" />
        <ul>
            <li><a href="">困在网络游戏中的大学生</a></li>
            <li><a href="">困在网络游戏中的大学生</a></li>
            <li><a href="">困在网络游戏中的大学生</a></li>
            <li><a href="">困在网络游戏中的大学生</a></li>
        </ul>
    </div>
</body>
</html>

关于 margin padding 和width的一些说明

有时候在代码中，使用margin padding 或是width 都能实现我们的代码，但是考虑到使用复杂度的情况下优先使用width 其次是padding 再是 margin。原因如下：

margin 由于有垂直方向或内嵌的外边距合并问题需要考虑
padding 会引入盒子大小的问题
width 能解决的问题我们坚持使用width，我们经常使用宽度剩余法来做。

CSS3 盒子模型 box-sizing

css3 中可以通过 box-siziing 来指定盒子模型，即可以指定为content-box 或 border-box，这样我们计算盒子的大小的方式就发生了变化。

可以分成两种情况:

box-sizing : content-box 盒子就是传统意义的盒子，大小计算还是margin+padding+width
box-sizing: border-box 盒子大小为width 就是说padding和border是包含到width（也就是盒子大小）里面的（content的值会自动调整）

盒子阴影 box-shadow

语法格式:

box-shadow:水平阴影  垂直阴影  模糊距离  阴影尺寸  阴影颜色  内/外阴影(inset)

属性	属性值描述
h-shadow	必填阴影的水平位置
v-shadow	必填阴影的垂直位置
blur	可选模糊距离
spread	可选阴影尺寸
color	可选阴影颜色
inset	可选将外部阴影改为内部阴影

浮动

普通流(normal flow)

我们知道页面布局就是用css来摆放盒子的位置，如何把盒子摆放到正确的位置呢？

CSS的定位机制有3种：普通流（标准流），浮动和定位。

普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序，块级元素占一行，行内元素从左到右，这就是普通流。

浮动 float:

浮动最早用来控制图片，来实现文字环绕的效果。后来我们发现，这种方法可以让盒子排列成一行，因此我们就满满的偏离了主题，用浮动的特性来布局了，可能我们会有个疑问，转化为行内块元素会有什么问题呢？，是因为行内块元素中间会有一道空白，是我们无法调和的。

元素的浮动是指设置了浮动属性的元素会脱离标准的普通流的控制，移动到其父元素指定位置的过程。

在css中，通过float属性来定义浮动.

选择器 {
    float: 属性值;
}

属性值	属性值描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认）

浮动详细特性

浮动应该首先创建包含块的父元素，来管理里面的浮动的子元素，浮动的元素总是找离它最近的父级元素对齐，但是不会超出内边距的范围
在一个父级别盒子的子盒子，如果其中一个子盒子是浮动的，则其他子盒子都需要浮动，这样才能在一行中显示。
浮动的元素排列位置，跟上一个元素（块级）元素有关。如果上一个元素有浮动。则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容的大小。

版心是指页面的主体内容所在的区域。一般浏览器中水平居中显示，常见的宽度值有960px,980px,1000px,1200px;

清除浮动

有些时候我们需要清除浮动属性，比如我们不知道实际内容的多少，所以我们不能定义父元素的大小，而其子元素都是浮动的，不占高度空间，这时候，父元素的盒子就撑不起来，父元素的兄弟元素就会按照普通流排列，有可能会被覆盖到。

清除浮动的方法

额外标签法

通过在浮动元素的末尾添加一个空的标签，例如

，或是br 等即可。

优点：通俗易懂，书写方便

缺点：需要增加标签，增加结构复杂度

父级元素添加overflow方法

可以通过出发BFC的方式，可以实现清除浮动的效果。

可以给父级添加: overflow 为 hidden | auto | scroll 都可以实现

优点：代码简洁

缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;
}

优点: 复合闭合浮动思想，结构语义化正确

缺点: 由于ie6-7不支持:after ,使用zoom:1 触发 hasLayout。

注意: content:“.” 里面尽量跟一个点，或者其他，尽量不要为空，否则在firefox7.0前的版本中会生成空格。

双伪元素清除浮动 before 和 after

使用方法:

.clearfix:before,.clearfix:after {
    content:"";
    display:table;   /*触发BFC*/
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom:1;
}

定位

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分呢。

边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于父元素上边线的距离
bottom	底端偏移量，定义元素相对于父元素下边线的距离
left	左侧偏移量，定义元素相对于父元素左边线的距离
right	右侧偏移量，定义元素相对于父元素右边线的距离

定位模式 position

{
    position:属性值
}

position 属性的常用值

值	描述
static	自动定位(默认定位方式)
relative	相对定位,相对于其源文档的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位

静态定位是所有元素的默认定位方式，其实就是标准流的特性。在静态定位下，是无法通过边偏移来改变元素的位置的。

一般她用来清除定位。

相对定位 relative

相对定位是将元素相对于她的标准流的位置进行定位，对元素进行相对定位后，可以通过边偏移改变元素的位置，但是她在文档流中的位置仍然保留。

注意:

相对定位最重要的一点就是，他可以通过边偏移移动位置，但是原来的所占位置继续占有（相对定位不脱标）
其次，每次移动位置，都是一自己的左上角为基准点移动的

绝对定位 absolute

绝对定位作重要的一点是，他可以通过边偏移移动位置，但是她完全脱标，完全不占有位置.

父级没有定位.

若父级元素没有position transform perspective 属性，则以浏览器基准点定位

父级有定位

绝对定位将会根据最近父元素（有定位属性的）为基准进行定位

子绝父相

一般子类有绝对定位的话，父级要用相对定位。

绝对定位的盒子如何实现水平/垂直居中

算法为:

首先left 为 50%
然后走自己外边距负的一半值就可以了。

固定定位 fixed

固定定位是绝对定位的一种特殊形式，她以浏览器窗口作为参照物来定义网页元素。并且她将脱离标准流的控制，始终语句浏览器窗口来定义自己的显示位置。不管浏览器桂滚动条如何滚动，依旧不变。

固定定位的元素跟父级没有任何关系，只以浏览器为基准
固定定位完全脱标，不占位置，不随滚动条滚动。

粘性定位 sticky

叠放次序 z-index

当对于多个元素同时设置定位定位元素之间可能会发生重叠css中想要调整重叠元素之间的堆叠顺序，可以设置z-index层叠属性，取值为正整数负数和0.

z-index的默认值为0 取值越大定位元素越居上
如果取值相同，则根据书写顺序，后来者居上
后面的数字一定不要加单位
只有相对定位绝对定位固定定位有此属性。其余标准流浮动静态定位都无此属性。

四种定位的总结

定位模式	是否脱标	是否可以使用边偏移	移动基准位置
static	否	否	正常模式
relative	否	是	相对于自身的标准流位置
absolute	是	是	相对于最近的定位父级位置
fixed	是	是	相对于浏览器的位置

对于 absolute 和 fixed 我们可以设置 left 和right 0让宽度沾满容器，或 bottom 和 top 0让高度沾满容器

不写 left right top bottom 的话，走正常文档流。

定位模式的转化

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块元素模式。

所以行内元素，如果添加了绝对定位或固定定位之后元素可以不用转化模式，直接给定宽度和高度就可以了

元素的隐藏与显示

在css中有三种显示和隐藏的方式比较常见，他们分别是 display visibility 和overflow

display 显示

设置或检索对象是否及如何显示

display :none 隐藏对象特点是，隐藏之后，不在保留位置、

visibility 可见性

设置或检索是否显示对象

属性值为 visible 对象可视

hidden 对象隐藏隐藏之后继续保留原位置

overflow溢出

检索或设置对象内从超过其指定高度或者宽度时如何管理内容。

visible 不裁剪也不添加滚动

auto 超出内容时自动显示滚动

hidden 超出部分隐藏

scroll 不管超出与否，总是显示滚动条

flex伸缩布局

任何一个容器，都可以指定为flex 布局.

当我们为父盒子设为flex布局以后，子元素的float clear 和vertical-align 属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性布局=flex布局

flex布局的原理：

采用了flex布局的元素，称为flex容器，简称容器，他的所有子元素自动称为容器成员，称为flex项目简称项目。其中我们通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

flex 布局父项常见属性

flex-direction: 设置主轴的方向
justify-content: 设置主轴上的子元素排列方式
flex-wrap: 设置子元素是否换行
align-content: 设置侧轴上的子元素的排列方式（多行）
align-items: 设置侧轴上的子元素排列方式（单行）
flex-flow: 复合属性，相当于同事设置了 flex-direction和flex-wrap

flex-direction 设置主轴方向

在flex布局中，是分为主轴和侧轴两个方向的，默认情况下主轴方向就是x轴方向，侧轴方向就是y轴方向,而flex-direction可以指定主轴的方向，从而确定侧轴的方向。

属性	说明
row	从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

{
    display: flex;
    flex-direction: row;
}

justify-content 设置主轴上的子元素的排列方式

justify-content 属性定义了项目在主轴上的对齐方式

当然，使用该属性钱我们一定定义好了主轴

属性值	说明
flex-start	默认值从头部开始如果主轴是x轴从左到右
flex-end	从尾部开始排列
center	从主轴居中兑取
space-around	平分剩余空间
space-between	先两边贴边在平分剩余空间

flex-wrap 子元素是否换行

flex中，默认子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面

属性值	说明
nowrap	不换行默认值
wrap	换行

align-items 设置侧轴上的排列方式(单行)

属性值	说明
flex-start	从上到下
flex-end	从下倒上
center	垂直居中
stretch	拉伸

align-content

属性值	说明
flex-start	从上到下
flex-end	从下倒上
center	垂直居中
stretch	拉伸
space-around	子项在侧轴平分剩余空间
space-between	子项先分布在两头，在侧轴平分剩余空间

复合写法

flex-flow: 主轴方向是否换行

子项布局常见属性

flex子项目占的分数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序

flex

flex属性定义子项目分配剩余空间，用flex 来表示占多少分数

{
    flex: 0;
}

align-self

css 高级技巧

css用户界面样式

鼠标样式 cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

cursor: default  小白   pointer 小手  move 移动   text 文本

尽量不要用hand 因为火狐不支持，pointer ie6 以上都支持尽量用

轮廓 outline

绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

outline: outline-color || outline-style || outline-width

我们用的最多的就是去掉轮廓线

<input type="text" style="outline: 0;">

防止拖拽文本域resize

右下角文本域不可拖拽

<textarea style="resize: none;" />

垂直对齐 vertical-align

vertical-align 不影响块级元素中的内容对齐，他只针对行内元素或者行内块元素，通常用来控制表单和图片与文字的对齐

vertical-align: baseline(default) | top |middle | bottom

如何去除图片底线空白缝隙

有一个很重要的特性,图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白的缝隙，解决办法就是:

转化为块级元素
使用基于底线对齐 vertical-align: bottom 或者 top 或者middle

溢出文字的隐藏

word-break: 自动换行

normal : 使用浏览器的默认换行规则

break-all 允许单词内换行

keep-all 只能在半角空格或者连字符处换行

主要是用来处理英文单词

white-space

normal: 默认处理方式

nowrap:强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

text-overflow 文字溢出

clip 不显示省略标记，只是简单的裁剪

ellipsis 当对象内文本溢出时显示省略标记(…)

注意一定要搭配首先强制一行内显示，再次和overflow 属性搭配使用

{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

精灵技术

说白了就是将小图标等背景图片，制作在一个pic 上面，这样网络请求，只需要一次，减少请求次数，而我们可以通过 backgrand-position 来改变定位实现背景图的显示。

字体图标

字体图标的使用流程

ui 将效果图给到我们 svg 格式
前端人员上传网站生成兼容性字体文件包
将兼容性字体文件包导入本地
把字体文件包引入到html页面中

建议网站 http://icomoon.io http://iconfont.cn

/*声明字体*/
style {
 @font-face {

}
/*文字样式应用该字体*/    
span {
	font-family:"icomoon";
}
}
/*添加结构*/
span:before {
    content: "\e900";
}
/*或者  <span>xxx</span>*/

如何追加新图标到原来的库中

将 selection.json 从新上传，然后选择自己的新图标，一块下载，替换即可.

滑动门技术

滑动门技术实现原理

<a>
    <span>导航栏内容</span>
</a>

a设置背景左侧，padding 撑开合适的宽度
span 设置背景右侧，padding 撑开合适宽度，剩下的由文字继续撑开宽度
之所以a包含span 就是因为整个导航都是可以点击的

过度效果 transition

transition: 要过度的属性 花费时间 运动曲线 何时开始;

属性	描述
transition	简写属性，用于在一个属性中设置四个过度属性
transition-property	规定应用过度的css 属性名称
transition-duration	定义过度效果花费时间(0.5s)
transtion-timing-function	规定过度效果的时间曲线
transition-delay	规定过度效果何时开始

2D变形-移动 translate

translate(x,y)
translateX(x)
translateY(y)

transform:translate(-50%,-50%)

定位盒子居中的完美写法可以这样

{
    left: 50%;
    transform: translate(-50%);
}

2D变形-缩放 scale

transform:scale(x,y)(-50%,-50%)
scale(x,y)
scaleX(x)
scaleY(y)

2D变形-旋转 rotate(deg)

{
   transform: rotate(45deg);
}

transform-origin 可以调整元素转换变形的原点

div {
    transform-origin: left top;
}

2D变形-倾斜 skew(deg,deg)

div {
    transform-origin: left top;
}

3D变形-rataeXYZ

rataeX(180deg)
rataeY(180deg)
rataeZ(182deg)

透视 perspective

透视可以将一个2D 平面，在转化的过程当中，呈现3D效果

{
    perspective: 1000px ; 视距越大 效果越不明
}

3D变形 -移动

父元素{
    perspective: 500px;
}
元素 {
    transform:translateZ(100px);
}

 transform:translate3d(x,y,z); x 和y 可以使用px 或者 % 但是z 只能使用px

backface-visibility

backface-visibility属性定义当元素不面向屏幕时是否可见.

动画 css3 animation

动画是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式

animation: 动画名称  动画时间  运动曲线 何时开始 播放次数(infinite无限循环) 是否反方向

参见 css动画使用教程

奋斗的小面包

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css笔记

css3 基础内容
复制链接

扫一扫

专栏目录