CSS笔记

陈两全

于 2024-08-13 19:08:41 发布

阅读量401

点赞数 5

文章标签： css 笔记前端

本文链接：https://blog.csdn.net/2201_76100326/article/details/141157919

版权

8.13

1.列表样式

列表样式是指写在li标签上面的样式控制，他有三个属性和一个综合属性，分别是

1.list-style-type

2.list-style-position

3.list-style-image

4.list-style（综合属性）

1.1.list-style-type

list-style-type有五个属性值，分别是

1.默认值: disc（实心圆）

2.circle（空心圆）

3.square（方形）

4..decimal（0开头的数字标记）

5.lower-roman（小写罗马数字）

6.upper-roman（大写罗马数字）

7.none 取消所有样式

1.2.list-style-position

list-style-position有两个属性值，分别是

1.默认值: outside

2.inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。

1.3.list-style-image

1.none 不指定图片，默认内容标记将被 list-style-type 代替

2.url 使用绝对或相对地址指定列表项标记图片，如果图像地址无效，默认内容标记将被 list-style-type 代替

1.4.综合属性

list-style综合属性其实就是将以上三个按照一定的顺序书写顺序为：list-style-type, list-style-position, list-style-image。设置是不写属性值时使用默认值，默认值为：disc outside none。

2.表格样式

表格样式是写在css中，用来控制表格的各种样式，除了基本的宽（width）、高（height）、边框（border）外还有三种比较特殊的样式，分别是

1.border-collapse 设置表格的边框是否被折叠成一个单一的边框或隔开(去除单元格和单元格之间的缝隙)

2.text-align 水平对齐方式

3.vertical-align 垂直对齐方式

3.dispaly

display 属性规定元素应该生成的框的类型，他有几种基本的属性值，分别是

1.none 不显示元素

2.block 转换为块元素

3.inline 转换为行内元素

4inline-block 转换为行内块元素

5.table-cell 转换为table中的td格式，可以设置文字垂直方向的对其方式vertical-align: bottom;

dispaly中的none属性值与伪类:hover连用可呈现出鼠标悬停是元素消失或出现的效果并且元素消失时不占空间

4.overflow

overflow属性是指在内容超出父元素设置的空间时的解决办法，他有四种基本属性，分别是

1.visible 不变默认属性

2..hidden 超出隐藏

3.scroll 滚动条显示内容

4.auto 超出显示滚动条

5.盒模型组成

盒模型实际上是由四部分组成，分别是外边距（margin）、边框（border）、内边距（padding）、内容，我们在css设置的宽高实际上指的是内容的宽高，一般情况下盒子的大小是：左右（上下）外边距+左右（上下）边框+左右（上下）内边距+内容组成。

5.1.margin外边距

margin 简写属性在⼀个声明中设置所有外边距属性。该属性可以有 1 到 4 个值，与内边距相同

说明：这个简写属性设置⼀个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距，行内元素的的左右外边距不会合并。

同样，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。注意：允许使用负值。

他的属性值有四种，分别是：

1.auto 自动计算外边距

2.length 设置像素级px外边距

3.% 基于父级元素宽度的百分比的外边距

4.inherit 从父级元素继承外边距

当属性值分别是1个，2个，3个，4个时每种情况的值所代表的含义见下

选择器{
    /* 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px */
    margin:10px 5px 15px 20px;
    /*上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px */
    margin:10px 5px 15px;
    /* 上外边距和下外边距是 10px 右外边距和左外边距是 5px */
    margin:10px 5px;
    /* 4 个外边距都是 10px */
    margin:10px;
}

5.2.border边框

border 简写属性在⼀个声明设置所有的边框属性，属性有三种，顺序为：border-width border-style border-color

/* 设置四条边框的样式 */
p {
    border:5px solid #ff0000;
}
/* 设置每⼀条边框的样式 */
p {
    border-top:10px solid red;
    border-left:20px dotted green;
    border-right:30px double orange;
    border-bottom:40px dashed red;
}
/* css画一个三角形 */
div {
    width:0;
    height:0;
    border:10px solid transparent;
    border-top-color:red;
}