CSS样式和盒子模型

最新推荐文章于 2025-02-05 22:32:46 发布

南城旧梦！

最新推荐文章于 2025-02-05 22:32:46 发布

阅读量56

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/Dong3283205200/article/details/131729703

版权

本文介绍了CSS中关于文本对齐、行高、首行缩进的设置，包括center、left、right和justify等对齐方式。同时，讲解了text-decoration属性，如underline、overline和line-through。此外，还涵盖了背景颜色、背景图片的配置以及盒子模型的相关概念，如内边距、外间距和边框的设置。

摘要由CSDN通过智能技术生成

对齐方式：

text-align 对其方式

1.center 剧中

2.left 左对齐

3.right 右对齐

4.justify 两端对齐

line-height:行高

text-indent: 60px; 首行缩进

/* text-decoration: none;

用于清除a标签的默认下划线

显示 a:hover

* 定义文本下的一条线 */

/* text-decoration: underline; */

/* 定义文本上的一条线 */

/* text-decoration: overline; */

line-height: 80px;

/* 定义穿过文本的一条线(删除线 s或del 标签同样的效果) */

text-decoration: line-through;

}

/* 定义每个单词以大写字母开头 */

/* text-transform: capitalize; */

/* 全部字母都大写 */

/* text-transform: uppercase; */

/* 全部字母都小写 */

/* text-transform: lowercase; */

二.背景

定义背景颜色 */

/* background-color: aquamarine; */

/* 定义背景图片 */

/* background-image: url(./img/a.jpg); */

/* 定义背景图片平铺方式 */

/* background-repeat: no-repeat; */

/* 定义背景图片大小 css3新增属性 */

/* background-size: 100% 100%; */

行内元素 span a

行内块元素 img 表单元素（input、select、textarea）

块级元素 div p h1-h6 ul li hr br

/* display:

inline-block: 设置为行内块元素，宽高生效，不独占一行

block: 设置为块级元素，宽高生效，独占一行

inline：设置为行内元素，宽高不生效

none：隐藏

*/

/* display: inline; */

三.盒子模型

/* 内边距 */

/* padding: 10px; */

/* padding-top: 20px;

padding-bottom: 40px;

padding-left: 50px;

padding-right: 30px; */

/* 外间距 */

/* margin: 10px; */

/* 简写 */

/* 第一个值是上下第二个值是左右 */

/* padding: 10px 20px; */

/* 上左右下 */

/* padding: 10px 20px 30px; */

/* 上右下左 */

padding: 10px 20px 30px 40px;

height: 0; */

/* 宽度样式颜色 */

/* 样式：

solid 实线

dashed 虚线

*/

/* 颜色

transparent：透明色

*/

/* 设置四边边框 */

border: 10px dashed red;

/* 单独设置下边框 */

border-bottom: 10px solid red;

/* 单独设置下边框颜色 */

border-bottom-color: aqua;