CSS笔记

最新推荐文章于 2023-09-21 11:36:32 发布
最新推荐文章于 2023-09-21 11:36:32 发布
阅读量523 收藏 5
点赞数 3
文章标签： CSS CSS选择器 CSS属性 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013474568/article/details/85044151
版权

CSS笔记

CSS

CSS简介

什么是 CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

注意： 样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
CSS/CSS3 API 中文文档

引用方式

内联样式表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body style="background-color:#b0c4de;">
	<h1>我的 CSS web 页!</h1>
	<p>你好世界！这是来自 runoob 菜鸟教程的实例。</p>
</body>
</html>

内部样式表

内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在<style>``<style/>标签对内。并且<style>标签是放在<head>标签内的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body {
	background-color:#b0c4de;
}
</style>
</head>

<body>
	<h1>我的 CSS web 页!</h1>
	<p>你好世界！这是来自 runoob 菜鸟教程的实例。</p>
</body>
</html>

外部样式表

推荐使用。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。
mystyle.css文件:

body {
	background-color:#b0c4de;
}

HTML页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<!-- 在HTML页面中引用文件名为newfile的css文件 -->
<link type="text/css" rel="stylesheet" href="mystyle.css"/>
</head>
<body>
	<h1>我的 CSS web 页!</h1>
	<p>你好世界！这是来自 runoob 菜鸟教程的实例。</p>
</body>
</html>

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意： 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

CSS 语法

CSS 规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器 {
    样式属性1:取值1;
    样式属性2:取值2;
    …… 
}

CSS 注释

以" /*" 开始, 以 "*/ "结束:

/*这是个注释*/
p{
	text-align:center;
	/*这是另一个注释*/
	color:black;
	font-family:arial;
}

CSS 选择器

完整CSS选择器参考手册

id 和 class 选择器

id和class是HTML元素中两个最基本的公共属性。
id属性被赋予了标识页面元素的唯一身份。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
class，顾名思义，就是“类”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class具有相同的CSS样式。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号来定义。
如果你要为两个元素或者两个以上元素定义相同的样式，建议使用class属性。

选择器HTML属性CSS
id选择器id#
class选择器class.
id 选择器
#para1
{
    text-align:center;
    color:red;
}

<body>
	<p id="para1">Hello World!</p>
	<p>这个段落不受该样式的影响。</p>
</body>
class 选择器
/*所有拥有 center 类的 HTML 元素均为居中*/
.center {text-align:center;}
/*所有的 p 元素使用 class="center" 让该元素的文本居中:*/
p.center {text-align:center}

此外，需要注意一下：

  • 一个标签可以同时定义多个class；
  • id也可以写成name，区别在于name是HTML中的标准，而id是XHTML中的标准，现在网页的标准都是使用id，所以大家尽量不要用name属性；

标签选择器

// 标签即HTML标签，比如body,div,p等
div{text-align:center;}

属性选择器

/*把包含标题（title）的所有元素变为蓝色*/
[title]
{
    color:blue;
}
属性和值选择器

示例一：

/*标题title='runoob'元素的边框样式*/
[title=runoob]
{
    border:5px solid green;
}

示例二：

/*匹配到下文中的第三个div元素*/
div[title="height"]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;<br>
}

<body>
    <div title="width"></div>
    <div></div>
    <div title="height"></div>
</body>
属性和值的选择器 - 多值
/*指定值的title属性的元素样式的例子，使用（~）分隔属性和值:*/
[title~=hello] { color:blue; }
/*适用如下：*/
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>

/*指定值的lang属性的元素样式的例子，使用（|）分隔属性和值*/
[lang|=en] { color:blue; }
/*适用如下：*/
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
表单样式
input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

子选择器

子元素选择器，就是选中某个元素下的子元素(包括子、孙)，然后对该子元素设置CSS样式。
说明：
父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。
语法：

父选择器 子元素选择{
    样式属性1:取值1;
    样式属性2:取值2;
    ……
}

相邻选择器

相邻选择器，就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。
语法：

元素A + 元素A相邻兄弟元素{
    样式属性1:取值1;
    样式属性2:取值2;
    ……
}

示例一：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /*选择“id为lv的元素”的相邻的下一个兄弟元素div，也就是第3个div元素。*/
        #lv+div{color:red;}
    </style>
</head>
<body>
    <div>111</div>
    <div id="lv">
        <p>222</p>
    </div>
    <div>333</div>
    <div>444</div>
</body>
</html>

示例二：

/*这个只能选择到下面第二行的那个p元素  最后一个不满足紧接在div元素后面这个条件*/
div+.box{width:100px; height:100px; background:pink;}
 　	<div></div>
    <p class="box"></p>
    <p class="box"></p>
    <div></div>
    <p></p>
    <p class="box"></p>

群组选取

群组选择器，就是同时对几个选择器进行相同的操作。
说明：
对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效。
语法：

选择器A,选择器B,选择器C{
    样式属性1:取值1;
    样式属性2:取值2;
    ……
}

示例一：

/*同时匹配到下文中的div标签和id为box的p标签*/
div,#box{width:100px; height:100px; background:#000;} 
<div></div>
<p id="box"></p>

伪类选择器(:hover)

:hover在鼠标移到链接上时添加的特殊样式。
提示: :hover 选择器器可用于所有元素，不仅是链接。
示例一：

img:hover{border:1px solid gray;}

CSS Background(背景)

详细参见

属性说明示例
background-color背景颜色body {background-color:#b0c4de;}
background-image背景图像body {background-image:url(‘paper.gif’);}

background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
页面背景图片设置实例:

body {background-image:url('paper.gif');}

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，

body{
	background-image:url('gradient2.png');
}

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

body{
	background-image:url('gradient2.png');
	background-repeat:repeat-x;
}

让背景图像不影响文本的排版（如果你不想让图像平铺，你可以使用 background-repeat属性）:

body{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
}

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置:

body{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
	background-position:right top;
}

CSS Text(文本)

文本颜色

/*颜色的名称*/
body {color: red;}
/*十六进制值*/
h1 {color: #00ff00;}
/*一个RGB值*/
h2 {color:rgb(255,0,0);}

字体样式(Font)

属性说明
font-family字体类型
font-size字体大小
font-weight字体粗细
font-style字体斜体
color颜色
字体类型(font-family)

默认情况下，浏览器的字体是宋体。中文字体常用的有宋体、微软雅黑，英文字体比较常用的是Times New Roman、Arial。

字体大小(font-size)

font-size的属性值可以有两种方式，一种是使用关键字(实际开发中，比较少使用这种方式来表达字体大小，一般都是采用像素作为单位的数值)；二是使用像素做单位的数值。

p {font-size:15px;}

px全称“pixel”（像素）。px就是一张图片中最小的点，或者是计算机屏幕最小的点。

字体颜色(color)
p {color:red;}
字体粗细(font-weight)

字体粗细和字体大小（font-size）是不一样的，粗细指的是字体的“肥胖”，大小指的是高和宽。
粗细值可以取关键字（常用normal和bold）和100~900的数值（不建议使用数值）。

font-weight属性值说明
normal默认值，正常体。相当于数值400
lighter较细
bold较粗。相当于数值700
bolder很粗（其实效果跟bold差不多）
字体斜体(font-style)
font-style属性值说明
normal默认值，正常体
italic斜体，这是一个属性
oblique将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique

文本样式(Text)

属性说明
text-decoration下划线、删除线、顶划线
text-transform文本大小写
font-varient将英文文本转换为“小型”大写字母
text-indent段落首行缩进
text-align文本水平对齐方式
line-height行高
letter-spacing字距
word-spacing词距
下划线、删除线、顶划线(text-decoration)
属性值说明
none默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline下划线，在HTML中使用<u>表示。一般用于文章的重点标明。
line-through删除线，在HTML中使用<s>表示。一般出现在电子商务网站中用于促销。
overline顶划线

text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

a {text-decoration:none;}
/*眉题（上划线）*/
h1 {text-decoration:overline;}
/*贯穿线*/
h1 {text-decoration:line-through;}
/*下划线*/
h1 {text-decoration:underline;}
文本大小写转换(text-transform)

文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

属性值说明
none默认值，无转换发生
uppercase转换成大写
lowercase转换成小写
capitalize将每个英文单词的首字母转换成大写，其余无转换发生
/*大写字母*/
p.uppercase {text-transform:uppercase;}
/*小写字母*/
p.lowercase {text-transform:lowercase;}
/*大写字母:首字母大写 This is some text. -- >This Is Some Text. */
p.capitalize {text-transform:capitalize;}
文本首行缩进(text-indent)

文本缩进属性是用来指定文本的第一行的缩进。text-indent的属性值应该是字体font-size属性值的两倍。

/*缩进*/
p {text-indent: 50px}
文本水平对齐(text-align)
/*默认值，左对齐*/
p.main {text-align:left;}
/*居中对齐*/
body {text-align:center;}
/*右对齐*/
p.date {text-align:right;}
文本行高(text-height)

很多书本上称line-height为行间距，这是不严谨的叫法。行高，顾名思义就是“一行的高度”，而行间距指的是“两行文本之间的距离”，大家稍微想一下就知道这是两个不一样的概念。

/*行高度设置*/
p {text-height: 20px}
字符间距(letter-spacing)

一个中文算一个字，一个英文字母也叫一个字。

<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
字间距(word-spacing)

定义词间距，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。

p { 
	word-spacing:30px;
}

边框(Border)

详见参考

边框样式(border-style)

详见参考

边框宽度(border-width)

详见参考

边框颜色(border-color)

p.one {
    border-style:solid;
    border-color:red;
}
p.two {
    border-style:solid;
    border-color:#98bf21;
}

边框简写(border)

/*正常写法*/
border-width:5px;
border-style:solid;
border-color:red;
/*简写等效于如上*/
border:5px solid red;

对于border:1px solid gray;这种简洁写法，第一个值指的是框的大小（border-width），第二个值指的是框的样式（border-style），第三个值指的是框的颜色（border-color）。

背景(background)

详见参考
详见参考

属性说明
background-color定义背景颜色
background-image定义背景图像的路径
background-repeat定义背景图像显示方式，例如纵向平铺、横向平铺
background-position定义背景图像在元素哪个位置
background-attachment定义背景图像是否随内容而滚动

背景颜色(background-color)

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>background-color属性</title>
    <style type="text/css">
        /*设置所有div元素的共同样式*/
        div {
			width:100px;
			height:60px;
        }
        /*设置3个div元素的个别样式*/
        #div1{background-color:red;}
        #div2{background-color: #F3DE3F;}
        #div3{background-color: #0AF7FB;}
    </style>
</head>
<body>
    <div id="div1">背景颜色值为red</div>
    <div id="div2">背景颜色值为#F3DE3F </div>
    <div id="div3">背景颜色值为#0AF7FB </div>
</body>
</html>
color和background-color区别
#p1 {
    width:290px;
    /*指文字颜色*/
    color:white;
    /*背景色*/
    background-color:red;
}

背景图像(background-image)

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
页面背景图片设置实例:

body {background-image:url('paper.gif');}

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，

<style type="text/css">
#div1 {
    /*给某个元素设置背景图像，元素要有一定的宽度和高度，背景图片才会显示出来。*/
    width:143px;
    height:220px;
    background-image:url("piece.jpg");
}
</style>

图像显示方式(background-repeat)

详见参考

属性值说明
no-repeat表示不平铺
repeat默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺
repeat-x表示在水平方向（x轴）平铺
repeat-y表示在垂直方向（y轴）平铺

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

body {
	background-image:url('gradient2.png');
	background-repeat:repeat-x;
}

让背景图像不影响文本的排版（如果你不想让图像平铺，你可以使用 background-repeat 属性）:

body{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
}

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置:

body {
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
	background-position:right top;
}

背景图像位置(background-position)

背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。

/**/
background-positon:像素值/关键字;
像素值
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>background-position属性</title>
    <style type="text/css">
        #div1 {
            width:400px;
            height:300px;
            border:1px solid gray;
            background-image:url("../App_images/lesson/run_cj/one piece.jpg");
            background-repeat:no-repeat;
            background-position:80px 40px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

效果图

关键字
属性值说明
top left左上
top center靠上居中
top right右上
left center靠左居中
center center正中
right center靠右居中
bottom left左下
bottom center靠下居中
bottom right右下

背景固定样式(background-attachment)

设置背景图像是随对象滚动还是固定不动。

/*scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。*/
background-attachment:scroll/fixed;

超链接(Link)

链接样式

属性说明
a:link定义a元素未访问时的样式
a:visited定义a元素访问后的样式
a:hover定义鼠标经过显示的样式
a:active定义鼠标单击激活时的样式
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
/*注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。*/
/*注意： a:active 必须在 a:hover 之后。*/

文本修饰

/*text-decoration 属性主要用于删除链接中的下划线：*/
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

图片样式

图片大小

/*语法*/
width:像素值;
height:像素值;

图片边框(border)

/*语法*/
border-width:像素值;
border-style:属性值
border-color:颜色值
/*如上简写*/
border:1px solid red;

图片水平对齐(text-align)

text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图片水平对齐</title>
    <style type="text/css">
        div
        {
            width:300px;
            height:80px;
            border:1px solid gray;
        }
        .div_img1{text-align:left;}
        .div_img2{text-align:center;}
        .div_img3{text-align:right;}
        img{width:60px;height:60px;}
    </style>
</head>
<body>
    <div class="div_img1">
        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
    </div>
    <div class="div_img2">
        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
    </div>
    <div class="div_img3">
        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
    </div>
</body>
</html>

效果图

图片垂直对齐(vertical-align)

vertical-align属性取值说明
top顶部对齐
middle中部对齐
baseline基线对齐
bottom底部对齐

文字环绕(float)

loat属性值说明
left元素向左浮动
right元素向右浮动

设置图片与文字的间距(margin)

/*上外边距*/
margin-top:像素值;
/*下外边距*/
margin-bottom:像素值;
/*左外边距*/
margin-left:像素值;
/*右外边距*/
margin-right:像素值;

列表样式(list style)

列表项符号(list-style-type)

/*语法*/
list-style-type:属性值;
/*去除列表项符号*/
list-style-type:none;
有序列表(ul)
list-style-type属性值说明
decimal默认值，数字1、2、3……
lower-roman小写罗马数字i、ii、iii……
upper-roman大写罗马数字I、II、III……
lower-alpha小写英文字母a、b、c……
upper-alpha大写英文字母A、B、C……
无序列表(ul)
list-style-type属性值说明
disc默认值，实心圆“●”
circle空心圆“○”
square实心正方形“■”
自定义列表项符号(list-style-image)

不管有序列表还是无序列表，都有他们自身的列表项符号。但默认的列表符号都比较丑。使用自定义列表项符号。

/*语法*/
list-style-image:url(图像地址);

表格样式()

表格边框合并(border-collapse)

表格特有的属性。除了表格，其他地方用不上。
只需要在<table>元素中设置border-collapse属性值就行，没必要在<th>、<td>这些元素也设置，造成代码冗余。

border-collapse属性值说明
separate默认值，边框分开，不合并
collapse边框合并，如果相邻，则共用一个边框

表格边框间距(border-spacing)

/*语法*/
border-spacing:像素值;
/*定义了单元格之间水平方向的间距为5px，垂直方向的间距为10px。*/
{border-spacing:5px 10px}

表格标题位置(caption-side)

caption-side属性值说明
top默认值，标题在顶部
bottom标题在底部

盒子模型(Box Model)

详见参考
详见参考
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

属性说明
border（边框）元素边框
margin（外边距）用于定义页面中元素与元素之间的距离
padding（内边距）用于定义内容与边框之间的距离
content（内容）可以是文字或图片
  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度和高度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    /*背景颜色*/
    background-color: lightgrey;
    /*宽*/
    width: 300px;
    /*边框：宽度25px;样式实线;颜色green;*/
    border: 25px solid green;
    /*内容与边框之间的距离*/
    padding: 25px;
    /*元素与元素之间的距离*/
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

内边距(padding)

/*语法*/
padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;

/*简洁写法*/
padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;

/*表示四个方向的内边距都是20px*/
padding:20px;

/*表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。*/
padding:20px 40px;

/*表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了。*/
padding:20px 40px 60px 80px;

外边距(margin)

/*语法*/
margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;

/*简洁写法*/
margin:像素值;
margin:像素值1 像素值2;
margin:像素值1 像素值2 像素值3 像素值4;

/*表示四个方向的外边距都是20px*/
margin:20px;

/*表示margin-top和margin-bottom为20px，margin-right和margin-left为40px。*/
margin:20px 40px;

/*表示margin-top为20px，margin-right为40px，margin-bottom为60px，margin-left为80px。大家按照顺时针方向记忆就可以了。*/
margin:20px 40px 60px 80px;

浮动布局

定位布局(Position)

浮动布局比较灵活，但是不容易控制。而定位布局的出现，使得用户精准定位页面中的任意元素成为可能，使得网页布局变得更加随心所欲。当然由于定位布局缺乏灵活性，也给空间大小和位置不确定的版面布局带来困惑。
定位的方法有很多种，它们分别是固定定位（fixed）、相对定位（relative）、绝对定位（absolute）和静态定位（static）。
position 属性的五个值：

固定定位(fixed)

/*语法*/
position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;
/*position:fixed;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。*/

相对定位(relative)

/*语法*/
position:relative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
/*“position:relative;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:relative;”使得元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对原始位置。相对定位的容器浮上来后，其所占的位置仍然留有空位，后面的无定位元素仍然不会“挤上来”。*/

绝对定位(absolute)

绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地把元素移动到任意你想要的位置。
一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。

/*语法*/
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;

静态定位(static)

如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。
说白了，平常我们根本就用不到“position:static”，不过呢，如果有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用“position:static;”来实现。
在CSS入门阶段，大家只需要深入学习固定定位（fixed）、相对定位（relative）和绝对定位（absolute）就已经可以走得很远了。

教程参考与笔记

CSS实例
CSS教程
CSS教程

qiqitrue
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
个人css学习笔记 精华版
05-27
个人css学习笔记 精华版 个人css学习笔记 精华版
CSS完整笔记
weixin_68478645的博客
01-29 611
font-size：大小尺寸 ：值：inherited 默认值16px px像素 %百分比相对于父标签的 字体大小的百分比 em 倍数 相对于父元素标签字体大小的倍 数 rem 相对于根标签文本字体的尺寸。hand（手型）、crosshair （“十”型）、text （“I”型）、wait（等待）、default （默认）、help（帮助）、类选择器：以点为前缀。font：简写：font：font-style|font-weight|font-size|font-family。
CSS笔记汇总-最全最仔细（会时刻更新）
最新发布
小女不才
09-21 890
样式表优点缺点使用情况控制范围行内样式书写方便，权重高没有实现样式和结构相分离较少一个标签内部样式部分结构和样式像分离没有彻底分离较多控制一个页面外部样式完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点一个完整的网页 ，是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。浮动可以让多个块级元素行显示或者左右对齐盒子 ，多个块级盒子水平显示就用浮动布局。定位。
CSS学习笔记
m0_58761900的博客
09-18 3000
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css笔记
04-02
css笔记是自己最近没啥事,重新的梳理了一遍之后,写的,为了帮助自己提高,希望对看到笔记的人,也能有所帮助.
CSS笔记.pdf
07-14
CSS笔记.pdf
CSS笔记（精简）
weixin_46160720的博客
03-11 4392
CSS笔记 HTML 前端教程 前端笔记
HTML+CSS详细笔记
06-14
自己在学习HTML的时候随笔记的笔记，用于以后复习用，现在可以跟大家共享了！
CSS 学习笔记
ShaoXiaoQi的博客
08-12 411
一、初识CSS 1.1 CSS概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。而且还
CSS盒子模型
qq_40233402的博客
07-11 524
CSS盒子模型 课程目标 1.常用样式 2.盒子模型 3.CSS3常见效果 盒子模型介绍 引用百度百科 层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式） 常用样式 基础样式 样式名 描述 text-align 行元素水平方向居中 text-decoration 控制下划线 none没有 underline有 line-hight 行高 font-size
CSS笔记 （参考很多文章 非原创）
qq_53555672的博客
10-20 638
css
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
热门推荐
m0_67401270的博客
03-07 1万+
基于黑马前端视频学习的CSS3笔记，每一天的知识点都放在一起，方便学习查阅 ==CSS第一天== 一、css简介 二、css语法规范 三、css代码风格 四、css选择器的作用 五、css基础选择器 1、标签选择器： 2、类选择器 3、多类名选择器 4、id选择器： 5、id选择器和类选择器的区别 6、通配符选择器 7、选择器总结 六、css字体属性: 1、字体大小： 2、字体粗细： 3、字体样式： 4、字体的综合写法 5、字体总结： 七、css文本属性： 1、文本颜色： 2、文本
【css笔记】
weixin_58387292的博客
03-11 738
css笔记
CSS笔记整理
weixin_60645637的博客
12-27 165
CSSCSS基本结构CSS的语法单元是样式，每个样式包含两个部分内容：选择器和声明（或称为规则）选择器：选择器告诉我们浏览器该样式将作用于页面哪些对象，这些对象可以是某个标签、所有网页对象指定Class或ID值等，；浏览器在解析这个样式时，根据选择器来渲染对象的显示效果，选择器也可称为选择符声明：声明可以增加一个或无数个，这些声明命令浏览器如何去渲染选择器的对象。声明必须包括两个部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中的最后一个声明可以省略分号。
CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
haobowen的博客
12-05 8332
1. CSS 简介 CSS 的主要使用场景就是美化网页，布局页面的 1.1 HTML 的局限性 说起 HTML ，他只关注内容的语义。比如 <h1> 表明这是一个大标题，<p> 表明这是一个段落，<img> 表明这有一个图片，<a> 表示此处有链接。 虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表（Cascading Style Sheets）的简称 有时我们也称之为 CSS 样
pink老师css笔记
08-17
很抱歉，我无法根据提供的引用内容回答你的问题，因为引用内容并没有提到"Pink老师CSS笔记"这个话题。如果你有关于"Pink老师CSS笔记"的具体问题，我将非常乐意帮助你回答。<span class="em">1</span><span class="em...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值