CSS入门教程

文章目录

- 一、前端
- 二、CSS
- - 2.1 css概念
  - 2.2 CSS样式引入方式
  - - 2.2.1 外部样式
    - 2.2.2 内部样式
    - 2.2.3 行内样式
  - 2.3 基础选择器
  - - 2.3.1 元素选择器
    - 2.3.2 类选择器
    - 2.3.3 id选择器
    - 2.3.4 通配符选择器
    - 2.3.5 后代选择器
    - 2.3.6 群组选择器
  - 2.4 字体样式
  - - 2.4.1 字体类型
    - 2.4.2 字体大小
    - 2.4.3 字体粗细
    - 2.4.4 字体风格
    - 2.4.5 字体颜色
  - 2.5 文本样式
  - - 2.5.1 首行缩进
    - 2.5.2 水平对齐
    - 2.5.3 文本修饰
    - 2.5.4 大小写转换
    - 2.5.5 行高
    - 2.5.6 间距
  - 2.6 边框样式
  - - 2.6.1 边框的宽度
    - 2.6.2 边框的外观
    - 2.6.3 边框的颜色
    - 2.6.4 边框样式简写
    - 2.6.5 边框局部样式
  - 2.7 列表样式
  - - 2.7.1 列表项符号
    - 2.7.2 列表项图片
  - 2.8 表格样式
  - - 2.8.1 表格标题位置
    - 2.8.2 表格边框合并
    - 2.8.3 表格边框间距
  - 2.9 图片样式
  - - 2.9.1 图片大小
    - 2.9.2 图片边框
    - 2.9.3 图片对齐
    - 2.9.4 文字环绕
  - 2.10 背景样式
  - - 2.10.1 背景颜色
    - 2.10.2 背景图片
  - 2.11 超链接样式
  - 2.12 盒子模型
  - - 2.12.1 内容区
    - 2.12.2 内边距
    - 2.12.3 边框
    - 2.12.4 外边距
  - 2.13 浮动布局
  - - 2.13.1 定义浮动
    - 2.13.2 清除浮动
  - 2.14 定位布局
  - - 2.14.1 固定定位
    - 2.14.2 相对定位
    - 2.14.3 绝对定位
    - 2.14.4 静态定位

一、前端

构成	语言	描述
结构	HTML	网页元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如颜色、大小等）
行为	JavaScript	网页交互

二、CSS

2.1 css概念

CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式

2.2 CSS样式引入方式

2.2.1 外部样式

CSS写在一个单独的.css文件中，通过link标签在网页中引入

<link rel="stylesheet" href="文件路径">

2.2.2 内部样式

CSS写在网页的head标签中，用style标签包裹

<style>/* 写在style标签中的样式 */
</style>

2.2.3 行内样式

CSS写在标签的style属性中

<标签名 style="行内样式写在这"></标签名>

三种CSS样式引入方式的区别

引入方式	书写位置	作用范围	使用场景
外部样式	CSS写在单独的css文件中，通过link标签引入	多个页面	项目中
内部样式	CSS写在head头部style标签中	当前页面	案例演示中
行内样式	CSS写在标签的style属性中	当前标签	配合js使用

2.3 基础选择器

选择器，就是选取（查找）需要设置样式元素的方式

选择器 {属性名: 属性值;
}

属性名和属性值合称为css属性

2.3.1 元素选择器

通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>p {color: red;}</style>
</head>
<body><p>我爱中国</p><p>我爱人民</p><div>我爱家乡</div>
</body>
</html>

小结：

1、无论嵌套多少层，只要元素名称相同都会被找到

2.3.2 类选择器

通过类名称，找到页面中所有带这个类名称的元素，然后对其设置CSS样式

类选择器，也有人叫class选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>.color-style {color: red;}</style>
</head>
<body><p class="color-style">我爱中国</p><p>我爱人民</p><div class="color-style">我爱家乡</div>
</body>
</html>

小结：

1、所有元素都有class属性，class属性的属性值叫类名

2、类名由数字、字母、下划线、中划线组成，不能以数字、中划线开头

3、一个元素可以有多个类名，类名之间用空格隔开

2.3.3 id选择器

通过元素id属性的属性值，找到页面中带这个id属性值的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>#one {color: red;}</style>
</head>
<body><p id="one">我爱中国</p><p id="two">我爱人民</p><div>我爱家乡</div>
</body>
</html>

小结：

1、所有元素都有id属性

2、id属性值在一个页面中是唯一的

3、一个元素只能有一个id属性值

2.3.4 通配符选择器

查找页面中所有的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>* {color: red;}</style>
</head>
<body><p id="one">我爱中国</p><p id="two">我爱人民</p><div>我爱家乡</div>
</body>
</html>

小结：

1、通常用于网页重置样式，不常用

2.3.5 后代选择器

根据选择器查找符合条件的元素，再根据后代选择器查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>#one p {color: red;}</style>
</head>
<body><div id="one"><p>我爱中国</p><p>我爱人民</p><div>我爱家乡</div><div><p>我爱中国</p><p>我爱人民</p></div></div><div id="two"><p>我爱中国</p><p>我爱人民</p><div>我爱家乡</div><div><p>我爱中国</p><p>我爱人民</p></div></div>
</body>
</html>

2.3.6 群组选择器

根据多个选择器各自查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>p,h3 {color: red;}</style>
</head>
<body><p>我爱中国</p><h3>我爱人民</h3><div>我爱家乡</div>
</body>
</html>

2.4 字体样式

字体样式，针对文字本身样式

字体相关的CSS属性

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

2.4.1 字体类型

语法：

font-family: 字体1,字体2,字体3...;

说明：

1、font-family属性可是设置多个属性值，用英文逗号隔开，生效顺序是从左到右。浏览器默认字体类型一般是"宋体"

2、字体类型只有一个英文单词，则不需要加上引号；字体类型是多个英文单词或中文的，则需要加上双引号

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>p {font-family: Arial;}h3 {font-family: monospace;}div {font-family: "新宋体";}</style>
</head>
<body><p>我爱中国</p><h3>我爱人民</h3><div>我爱家乡</div>
</body>
</html>

2.4.2 字体大小

语法：

font-size: 数字 + px

说明：

1、px是像素单位，单位需要设置，否则无效

2、谷歌浏览器默认文字大小是16px

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>p {font-size: 18px;}div {font-size: 36px;}</style>
</head>
<body><p>我爱中国</p><div>我爱家乡</div>
</body>
</html>

2.4.3 字体粗细

语法：

font-weight: normal/bold/100~900

说明：

属性值	说明
normal	正常（默认值）
bold	较粗
100~900	取100~900九种数值，但部分字体没有9种粗细，设置可能不生效

实际开发一般会设置bold，不设置默认是normal

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>p {font-weight: normal;}div {font-weight: bold;}</style>
</head>
<body><p>我爱中国</p><div>我爱家乡</div>
</body>
</html>

2.4.4 字体风格

语法：

font-style: 取值

说明：

属性值	说明
normal	正常（默认值）
italic	斜体
oblique	斜体

不是所有字体都有italic属性值，如果没有italic的，则用oblique

font连写

语法：

font: style weight size family;

说明：

1、可以省略前两项，省略了相当于设置了默认值

不常用，作为了解

2.4.5 字体颜色

语法：

color: 颜色值

说明：

color属性取值常用有两种，一种是关键字（比如red、green、blue），另外一种是16进制RGB值（#000000，#FFFFFF）

问题一：给同一个元素设置了相同的属性样式，哪个生效？

答：样式会层叠（覆盖），写在最后面的会生效。

问题二：html里面有注释，css有没有注释，如何写？

<style>/* 采用元素选择器给p元素设置css样式 */p {color: #000000;  /* p元素字体颜色为黑色 */}
</style>

2.5 文本样式

文本样式，针对段落的排版效果

文本相关CSS属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修缮
text-transform	大小写转换
line-height	行高
letter-spacing	字母间距
word-spacing	词间距

2.5.1 首行缩进

语法：

text-indent: 像素值

说明：

缩进大小和字体大小是有关的，缩进1个字的空间等同于1个字的字体大小。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<style>p {font-size: 14px;text-indent: 28px;}
</style>
</head>
<body><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

2.5.2 水平对齐

语法：

text-align: 取值

说明：

text-align属性取值

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<style>.one {text-align: left;}.two {text-align: center;}.three {text-align: right;}
</style>
</head>
<body><p class="one">生于忧患死于安乐</p><p class="two">生于忧患死于安乐</p><p class="three">生于忧患死于安乐</p>
</body>
</html>

2.5.3 文本修饰

语法：

text-decoration: 取值

说明：

text-decoration属性值

属性值	说明
none	去除所有的划线效果（默认值）
underline	下划线
line-throught	中划线
overline	顶划线

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<style>.one {text-decoration: none;}.two {text-decoration: underline;}.three {text-decoration: line-through;}.four {text-decoration: overline;}
</style>
</head>
<body><p class="one">生于忧患死于安乐</p><p class="two">生于忧患死于安乐</p><p class="three">生于忧患死于安乐</p><p class="four">生于忧患死于安乐</p>
</body>
</html>

2.5.4 大小写转换

语法：

text-transform: 取值

说明：

text-transform属性取值

属性值	说明
none	无转换（默认值）
uppercase	转换为大写
lowercase	转换为小写
capitalize	只将每个英文单词首字母转换为大写

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<style>.one {text-transform: none;}.two {text-transform: uppercase;}.three {text-transform: lowercase;}.four {text-transform: capitalize;}
</style>
</head>
<body><p class="one">Hello World</p><p class="two">Hello World</p><p class="three">Hello World</p><p class="four">hello world</p>
</body>
</html>

2.5.5 行高

语法：

line-height: 取值;

说明：

1、取值可以是一个固定的数值（比如24px），也可以是一个百分数（比如150%）

line-height: 150%;

2、使用font-size属性和line-height属性的组合，可以让行高与字体大小之间保持一定的比例

font-size: 16px;
line-height: 1.5

3、使用line-height属性的继承值。如果父元素的line-height属性有值，那么子元素及后代元素会继承父元素的行高

body {line-height: 1.5;
}
p {font-size: 16px;
}

行高的设置要大于字体大小的设置，才会显得好看

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>p {font-size: 16px;line-height: 24px;}</style>
</head>
<body><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能</p>
</body>
</html>

2.5.6 间距

字间距

语法：

letter-spacing: 像素值

说明：

letter-spacing属性用来设置两个字之间的距离，一个英文字母或汉字都是当做一个字来处理

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>p {letter-spacing: 10px;}</style>
</head><p>are you ok.你好吗？</p>
<body>
</body>
</html>

词间距

语法：

word-spacing: 像素值;

说明：

word-spacing属性用来设置英文单词之间的距离

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>p {word-spacing: 10px;}</style>
</head><p>are you ok.你好吗？</p>
<body>
</body>
</html>

2.6 边框样式

元素基本可以定义边框，边框样式由边框宽度、边框外观和边框颜色三个属性组成。

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

2.6.1 边框的宽度

语法：

border-width: 像素值;

说明：

边框border-width属性值是一个像素值

2.6.2 边框的外观

语法：

border-style: 取值;

说明：

border-style取值有三个

属性值	说明
none	无样式
dashed	虚线
solid	实线

2.6.3 边框的颜色

语法：

border-color: 颜色关键字/16进制RGB值

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>div {border-width: 1px;border-style: solid;border-color: red;}</style>
</head><div>hello,world</div>
<body>
</body>
</html>

2.6.4 边框样式简写

语法：

border: border-width border-style border-color;

案例：

div {border: 1px solid red;
}

2.6.5 边框局部样式

元素都是盒子模型，都是有四条边的，分别是上、下、左、右。所以又可以为元素某一边边设置边框样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>div {width: 300px;height: 200px;border-top: 1px dashed darkred;border-bottom: 2px solid green;border-left: 3px solid grey;border-right: 4px dashed lightseagreen;}</style>
</head><div></div>
<body>
</body>
</html>

2.7 列表样式

2.7.1 列表项符号

定义列表项符号

在HTML中，无序列表和有序列表是通过标签ul、ol的type属性来定义的

<ol type="a"><li>my</li><li>your</li>
</ol>
<ul type="disc"><li>my</li><li>your</li>
</ul>

接触了css后，得改成list-style-type属性来定义。HTML专心负责结构，CSS专心负责样式。

语法：

list-style-type: 取值;

说明：

ol元素的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	正方形■

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>ol {list-style-type: lower-alpha;}ul {list-style-type: square;}</style>
</head>
<body><ol><li>my</li><li>your</li></ol><ul><li>my</li><li>your</li></ul>
</body>
</html>

去除列表项符号

随着技术和审美不断的提高，实际开发中都是直接去除列表项符号

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>ol,ul {list-style-type: none;}</style>
</head>
<body><ol><li>my</li><li>your</li></ol><ul><li>my</li><li>your</li></ul>
</body>
</html>

有序列表或无序列表设置了list-style-type: none后，样式都一样了。

2.7.2 列表项图片

语法：

list-style-image: url(图片路径);

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>ul {list-style-image: url("small.png");}</style>
</head>
<body><ul><li>my</li><li>your</li></ul>
</body>
</html>

list-style-image不能控制图片大小，实际开发中用background来替代

2.8 表格样式

2.8.1 表格标题位置

语法：

caption-side: 取值;

说明：

caption-side属性取值

属性值	说明
top	标题在顶部（默认值）
bottom	标题在底部

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>table,tr,th,td {border: 1px solid gray;}table {caption-side: bottom;}</style>
</head>
<body><table><caption>学生成绩</caption><tr><th>姓名</th><th>数学</th></tr><tr><td>曹操</td><td>85</td></tr><tr><td>刘备</td><td>75</td></tr></table>
</body>
</html>

2.8.2 表格边框合并

语法：

border-collapse: 取值;

说明：

border-collapse属性取值

属性值	说明
separate	边框分开，有空隙（默认值）
collapse	边框合并，无空隙

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>table,tr,th,td {border: 1px solid gray;}table {border-collapse: collapse;}</style>
</head>
<body><table><caption>学生成绩</caption><tr><th>姓名</th><th>数学</th></tr><tr><td>曹操</td><td>85</td></tr><tr><td>刘备</td><td>75</td></tr></table>
</body>
</html>

2.8.3 表格边框间距

语法：

border-spacing: 像素值;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>table,tr,th,td {border: 1px solid gray;}table {border-spacing: 10px;}</style>
</head>
<body><table><caption>学生成绩</caption><tr><th>姓名</th><th>数学</th></tr><tr><td>曹操</td><td>85</td></tr><tr><td>刘备</td><td>75</td></tr></table>
</body>
</html>

2.9 图片样式

2.9.1 图片大小

语法：

width: 像素值;
height: 像素值;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>img {width: 40px;height: 40px;}</style>
</head>
<body><img src="small.png" alt="">
</body>
</html>

2.9.2 图片边框

语法:

border: 1px solid red;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>img {width: 40px;height: 40px;border: 1px solid red;}</style>
</head>
<body><img src="small.png" alt="">
</body>
</html>

2.9.3 图片对齐

水平对齐

语法：

text-align: 取值;

说明：

text-align属性取值

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>.i1 {text-align: left;}.i2 {text-align: center;}.i3 {text-align: right;}</style>
</head>
<body><div class="i1"><img src="small.png" alt=""></div><div class="i2"><img src="small.png" alt=""></div><div class="i3"><img src="small.png" alt=""></div>
</body>
</html>

图片的水平对齐属性设置是在图片标签的父标签上实现的

垂直对齐

语法：

vertical-align: 取值;

说明：

vertical-align属性取值

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>.i1 {vertical-align: top;}.i2 {vertical-align: middle;}.i3 {vertical-align: baseline;}.i4 {vertical-align: bottom;}</style>
</head>
<body><div><span>hello,world</span><img class="i1" src="small.png" alt=""><span>hello,world</span><hr></div><div><span>hello,world</span><img class="i2" src="small.png" alt=""><span>hello,world</span><hr></div><div><span>hello,world</span><img class="i3" src="small.png" alt=""><span>hello,world</span><hr></div><div><span>hello,world</span><img class="i4" src="small.png" alt=""><span>hello,world</span><hr></div>
</body>
</html>

2.9.4 文字环绕

语法：

float: 取值;

说明：

float属性取值

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>img {float: left;}</style>
</head>
<body><img src="small.png" alt=""><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

2.10 背景样式

2.10.1 背景颜色

语法：

background-color: 颜色值;

说明：

颜色值有两种表示方式，一种是颜色关键字，另外一种是16进制RGB值

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>div {width: 200px;height: 100px;/* 背景颜色 */background-color: burlywood;}</style>
</head>
<body><div>hello,world</div>
</body>
</html>

2.10.2 背景图片

引入背景图片

语法:

background-image: url(图片路径)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>div {height: 180px;width: 180px;background-image: url("small.png");}</style>
</head>
<body><div></div>
</body>
</html>

背景图片重复

语法：

background-repeat: 取值;

说明：

background-repeat属性取值

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>div {height: 180px;width: 180px;background-image: url("small.png");background-repeat: repeat-x;}</style>
</head>
<body><div></div>
</body>
</html>

背景图片位置

语法：

background-position: 水平距离 垂直距离

通过像素值定图片位置

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>div {height: 180px;width: 180px;border: 1px solid red;background-image: url("small.png");background-repeat: no-repeat;background-position: 10px 30px;}</style>
</head>
<body><div></div>
</body>
</html>

通过关键字定位图片位置

水平方向左left、中center、右right

垂直方向上top、中center、下bottom

通过水平方向、垂直方向组合出9种方式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>div {height: 180px;width: 180px;border: 1px solid red;background-image: url("small.png");background-repeat: no-repeat;background-position: center center;}</style>
</head>
<body><div></div>
</body>
</html>

背景图片固定

语法：

background-attachment: 取值;

说明：

background-attachment属性取值

属性值	说明
scroll	随元素一起滚动（默认值）
fixed	固定不动

2.11 超链接样式

语法：

a {}
a:link {}
a:visited {}
a:hover{}
a:active{}

说明：

伪类	说明
a:link	a元素未访问时的样式
a:visited	a元素访问后的样式
a:hover	鼠标经过a元素时的样式
a:active	鼠标点击时的样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><style>a {text-decoration: none;}a:hover {color: red;}</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

实际开发，一般设置a、a:hover样式就可以了

2.12 盒子模型

每一个元素都是由内容区、内边距、边框、外边距组成

属性	说明
content	内容区，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
border	边框，用于定义元素的边框
margin	外边距，用于定义当前元素与其他元素之间的距离

2.12.1 内容区

语法：

width: 像素值;
height: 像素值;
overflow: 取值;

说明：

overflow属性值

属性值	说明
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><style>img {width: 30px;height: 30px;}p {width: 50px;height: 50px;overflow: hidden;}</style>
</head>
<body>
<img src="small.png" alt="">
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

如果要给行内元素设置宽高，则需要给元素设置display: inline-block属性

2.12.2 内边距

语法：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

padding: 上下左右像素值;
padding: 上下像素值 左右像素值;
padding: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><style>p {border: 1px solid red;padding: 10px;}</style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

2.12.3 边框

边框知识参考2.6

2.12.4 外边距

语法：

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

margin: 上下左右像素值;
margin: 上下像素值 左右像素值;
margin: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><style>p {border: 1px solid red;padding: 10px;margin: 10px;}</style>
</head>
<body>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
<p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p>
</body>
</html>

2.13 浮动布局

正常文档流就是我们没有使用浮动或者定位去改变的默认情况，按照从上到下，从左到右顺序的元素布局情况。

2.13.1 定义浮动

语法：

float: 取值

说明：

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><style>#f {background-color: beige;padding: 10px;}#s1 {background-color: gray;float: left;}#s2 {background-color: aqua;float: left;}</style>
</head>
<body><div id="f"><div id="s1">box1</div><div id="s2">box2</div></div>
</body>
</html>

2.13.2 清除浮动

语法：

clear: 取值;

说明：

clear属性值

属性值	说明
left	清除左浮动
right	清除右浮动
both	同时清除左浮动和右浮动

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><style>#f {background-color: beige;padding: 10px;}#s1 {background-color: gray;float: left;}#s2 {background-color: aqua;float: left;}.clear {clear: both;}</style>
</head>
<body><div id="f"><div id="s1">box1</div><div id="s2">box2</div><div class="clear"></div></div>
</body>
</html>

2.14 定位布局

2.14.1 固定定位

语法：

position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><style>#s1 {position: fixed;top: 20px;left: 100px;color: red;}</style>
</head>
<body><div id="f"><div id="s1">回到顶部</div><div id="s2"><p>内容区</p>......</div></div>
</body>
</html>

2.14.2 相对定位

相对定位，指的是该元素的位置是相对于它的原始位置计算而来的

语法：

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><style>#f div {width: 100px;height: 50px;background-color: burlywood;margin: 10px;}.s2 {position: relative;top: 5px;left: 30px;}</style>
</head>
<body><div id="f"><div class="s1">1</div><div class="s2">2</div><div class="s3">3</div></div>
</body>
</html>

2.14.3 绝对定位

把元素定位到任意你想要的位置，完全脱离文档流

语法：

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><style>#f div {width: 100px;height: 50px;background-color: burlywood;margin: 10px;}.s2 {position: absolute;top: 200px;left: 200px;}</style>
</head>
<body><div id="f"><div class="s1">1</div><div class="s2">2</div><div class="s3">3</div></div>
</body>
</html>

2.14.4 静态定位

用法：

position: static;

说明：

元素position属性的默认值是static

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><style>#f div {width: 100px;height: 50px;background-color: burlywood;margin: 10px;}.s2 {position: static;top: 200px;left: 200px;}</style>
</head>
<body><div id="f"><div class="s1">1</div><div class="s2">2</div><div class="s3">3</div></div>
</body>
</html>

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/2182561.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

CSS入门教程

文章目录一、前端二、CSS2.1 css概念2.2 CSS样式引入方式2.2.1 外部样式2.2.2 内部样式2.2.3 行内样式2.3 基础选择器2.3.1 元素选择器2.3.2 类选择器2.3.3 id选择器2.3.4 通配符选择器2.3.5 后代选择器2.3.6 群组选择器2.4 字体样式2.4.1 字体类型2.4.2 字体大小2.4.3 字体粗……

编程日记2023/4/4 14:22:34

【Go进阶】一篇文章带你了解 — 方法

目录 1、Go 函数方法定义 1、Go 函数方法定义
在Go语言中，函数和方法不太一样，有明确的概念区分。其他语言中，比如Java，一般来说，函数就是方法，方法就是函数，但是在Go语言中，函数是指不属于任何结构体、类型的方法，也就是说，函数是没有接收者的；而方法是有接收者的……

编程日记2023/4/4 14:22:25

appimage转deb

将 AppImage 转换为 .deb 软件包，您可以使用一个名为 appimagetool 的工具。以下是将 AppImage 转换为 .deb 软件包的步骤：下载 appimagetool 工具。您可以从其 GitHub 页面（https://github.com/AppImage/AppImageKit/releases）下……

编程日记2023/4/4 14:22:16

setsockopt函数功能及参数详解

参考：未验证setsockopt函数功能及参数详解 https://www.cnblogs.com/cthon/p/9270778.html setsockopt和getsockopt函数解析https://blog.csdn.net/diaolingle/article/details/51122673Socket描述符选项[SOL_SOCKET]
#include <sys/socket.h>
int setsock……

编程日记2023/4/4 14:22:05

造车新势力3月成绩单：分化只会越来越严重

3月结束了，也迎来了造车新势力3月份的成绩单，好学生坏学生的分化只会越来越严重。
一般来说，当月1日发布销售数据的的造车新势力基本上都算是比较稳定，或者说公司还在继续经营，迟迟不发布或者拖了很久才发布的新势力不……

编程日记2023/4/4 14:21:53

计算机网络第四章（网络层）【湖科大教书匠】

主要任务是实现网络互连，进而实现数据包在各网络之间的传输 1. 面向连接的虚电路服务
可靠的通信由网络来保证必须建立网络层的连接—-虚电路VC(Virtual Circuit)通信双方沿着已建立的虚电路发送分组目的主机的地址仅在连接建立阶段使用，之后每个分组的……

编程日记2023/4/4 14:21:41

python 数据、曲线平滑处理——Savitzky-Golay 滤波器——详解

文章目录1 Savitzky-Golay 滤波器实现曲线平滑1.1 问题描述1.2 Savitzky-Golay 滤波器–调用讲解1.3 Savitzky-Golay 曲线平滑处理示例1.4 Savitzky-Golay原理剖析2 插值法对折线平滑处理——详解3 基于Numpy.convolve实现滑动平均滤波——详解1 Savitzky-Golay 滤波器实现曲线……

编程日记2023/4/4 14:20:56

Bidding模型训练新范式：阿里妈妈生成式出价模型（AIGB）详解

导读：今天以ChatGPT为代表的生成式大模型让科技行业重新兴奋起来，也为广告营销注入了新的想象力。生成式大模型几乎一定会带来用户与互联网产品交互模式的改变，进而颠覆广告营销模式。广告技术人，你们准备好了吗？阿里……

编程日记2023/4/4 14:20:47

antd vue3 图片上传组件扩展，支持多图上传图片拖拽排序等

组件涉及到 vue3.2、vite、Ant Design Vue 3.2.16、Windi CSS样式库、vuedraggable-es拖拽库等
组件功能
图片拖拽多图上传自定义图片加载样式自定义图片加载失败样式
注意：此处使用vuedraggable-es 而不是vuedraggable或vue.draggable.next 官方版本&#xff0c……

编程日记2023/4/4 14:20:34

房屋出租系统（第二版）

目录
第二版第二版基本介绍在第二版的房屋出租系统中，我们使用的数据库来存放，信息相比较第一版，第二版更加的简单，只需要完成一些对应的增删改查即可，第一版中我们要删除某个房屋对房屋的编号，我们还要……

编程日记2023/4/4 14:20:23

【面试题高逼格利用类实现加法】编写代码, 实现多线程数组求和.

编写代码, 实现多线程数组求和.关键1. 数组的初始化关键2. 奇偶的相加import java.util.Random;public class Thread_2533 {public static void main(String[] args) throws InterruptedException {// 记录开始时间long start System.currentTimeMillis();// 1. 给定一个很长的……

编程日记2023/4/16 14:56:10

一个python训练

美国:28:麻省理工学院,斯坦福大学,哈佛大学,加州理工学院,芝加哥大学,普林斯顿大学,宾夕法尼亚大学,耶鲁大学,康奈尔大学,哥伦比亚大学,密歇根大学安娜堡分校,约翰霍普金斯大学,西北大学,加州大学伯克利分校,纽约大学,加州大学洛杉矶分校,杜克大学,卡内基梅隆大学,加州大学圣地……

编程日记2023/4/16 14:55:59

Mybatis03学习笔记

目录使用注解开发
设置事务自动提交
mybatis运行原理
注解CRUD
lombok使用（偷懒神器，大神都不建议使用）
复杂查询环境（多对一）
复杂查询环境（一对多）
动态sql环境搭建
动态sql常用标签……

编程日记2023/4/16 14:55:50 CSS入门教程-编程部落

设置或取得c# NumericUpDown 编辑框值的方法,(注意：不是Value值)

本人在C#开发中使用到了NumericUpDown控件，但是发现该控件不能直接控制显示值，经研究得到下面的解决办法
NumericUpDown由于是由多个控件组合而来的控件，其中包含一个类似TextBox的控件，若想取得或改变其中的值要使用如下方法
N……

编程日记2023/4/16 14:55:46 CSS入门教程-编程部落

使用NPOI 技术的SetColumnWidth 精确控制列宽不能成功的解决办法（C#）

在使用NPOI技术开发自动操作EXCEL软件时遇到不能精确设置列宽的问题。
如
ISheet sheet1 hssfworkbook.CreateSheet("Sheet1");
sheet1.SetColumnWidth(0, 50 * 256); // 在EXCEL文档中实际列宽为49.29
sheet1.SetColumnWidth(1, 100 * 256); // 在EXCEL文……

编程日记2023/4/16 14:55:46 CSS入门教程-编程部落

Mysql 数据库zip版安装时basedir datadir 路径设置问题，避免转义符的影响

本人在开发Mysql数据库自动安装程序时遇到个很奇怪的问题，其中my.ini的basedir 的路径设置是下面这样的：
basedir d:\测试\test\mysql
但是在使用mysqld安装mysql服务时老是启动不了，报1067错误，后来查看window事件发现一个独特……

编程日记2023/4/16 14:55:45

java stream sorted排序考虑null值

项目里使用到排序, java里没有像C# 里的linq，只有stream,查找stream.sorted源码看到有个
Comparator.nullsLast
然后看了一下实现，果然是能够处理null值的排序，如：minPriceList.stream().sorted(Comparator.comparing(l -> l.g……

编程日记2023/4/16 14:55:45

spring @EnableConfigurationProperties 实现原理

查看DataSourceAutoConfiguration源码，发现如下代码： Configuration ConditionalOnClass({ DataSource.class, EmbeddedDatabaseType.class }) EnableConfigurationProperties(DataSourceProperties.class) Import({ DataSourcePoolMetadataProvidersCon……

编程日记2023/4/16 14:55:44

postman请求https网址没有响应，但是用浏览器有响应，解决办法

遇到个问题：同一个get请求的url，postman请求https网址没有响应，但是用浏览器有响应
url是https开头的，查看错误描述里有一个SSL的选项：然后根据描述关掉这个选项：然后就没问题了，能正常请求及……

编程日记2023/4/16 14:55:44

java @Inherited注解的作用

看到很多注解都被Inherited进行了修饰，但是这个Inherited有什么作用呢？
查看Inherited代码描述：
Indicates that an annotation type is automatically inherited. If an Inherited meta-annotation is present on an annotation type decl……

编程日记2023/4/16 14:55:43

CSS入门教程

文章目录

一、 前端

二、CSS

2.1 css概念

2.2 CSS样式引入方式

2.2.1 外部样式

2.2.2 内部样式

2.2.3 行内样式

2.3 基础选择器

2.3.1 元素选择器

2.3.2 类选择器

2.3.3 id选择器

2.3.4 通配符选择器

2.3.5 后代选择器

2.3.6 群组选择器

2.4 字体样式

2.4.1 字体类型

2.4.2 字体大小

2.4.3 字体粗细

2.4.4 字体风格

2.4.5 字体颜色

2.5 文本样式

2.5.1 首行缩进

2.5.2 水平对齐

2.5.3 文本修饰

2.5.4 大小写转换

2.5.5 行高

2.5.6 间距

2.6 边框样式

2.6.1 边框的宽度

2.6.2 边框的外观

2.6.3 边框的颜色

2.6.4 边框样式简写

2.6.5 边框局部样式

2.7 列表样式

2.7.1 列表项符号

2.7.2 列表项图片

2.8 表格样式

2.8.1 表格标题位置

2.8.2 表格边框合并

2.8.3 表格边框间距

2.9 图片样式

2.9.1 图片大小

2.9.2 图片边框

2.9.3 图片对齐

2.9.4 文字环绕

2.10 背景样式

2.10.1 背景颜色

2.10.2 背景图片

2.11 超链接样式

2.12 盒子模型

2.12.1 内容区

2.12.2 内边距

2.12.3 边框

2.12.4 外边距

2.13 浮动布局

2.13.1 定义浮动

2.13.2 清除浮动

2.14 定位布局

2.14.1 固定定位

2.14.2 相对定位

2.14.3 绝对定位

2.14.4 静态定位

相关文章：

CSS入门教程

【Go进阶】一篇文章带你了解 — 方法

appimage转deb

setsockopt函数功能及参数详解

造车新势力3月成绩单：分化只会越来越严重

计算机网络第四章（网络层）【湖科大教书匠】

python 数据、曲线平滑处理——Savitzky-Golay 滤波器——详解

Bidding模型训练新范式：阿里妈妈生成式出价模型（AIGB）详解

antd vue3 图片上传组件扩展，支持多图上传 图片拖拽排序等

房屋出租系统（第二版）

【面试题 高逼格利用 类实现加法】编写代码, 实现多线程数组求和.

一个python训练

Mybatis03学习笔记

设置或取得c# NumericUpDown 编辑框值的方法,(注意：不是Value值)

使用NPOI 技术 的SetColumnWidth 精确控制列宽不能成功的解决办法（C#）

一、前端

antd vue3 图片上传组件扩展，支持多图上传图片拖拽排序等

【面试题高逼格利用类实现加法】编写代码, 实现多线程数组求和.

使用NPOI 技术的SetColumnWidth 精确控制列宽不能成功的解决办法（C#）

java stream sorted排序考虑null值

关注我们么么哒！