css虚线样式是什么意思（CSS dashed和dotted的区别）

本文目录

• CSS dashed和dotted的区别
• css outline是什么意思
• CSS那些事儿

CSS dashed和dotted的区别

CSS中dashed和dotted区别如下：

1、组成虚线的方式不同：

两者在CSS中都是“虚线”。其中dashed来自 dash（破折号），由一个个破折号组成的虚线。dotted：来自 dot（点），由一个个点组成的虚线，也称点线。

2、在IE6.0中的表现区别：

在IE6.0中，宽度为1px的dotted和宽度为1px的dashed一样，表现为破折号组成的虚线。当宽度大于1px时，dotted表现为点组成的虚线。

3、在IE7.0中表现区别：

在IE7.0中，如果有4条1px宽度的边和其它任意数值宽度的边同时存在时，1px的dotted表现的和dashed一样，改变上述条件则表现为点组成的虚线。

参考资料来源：百度百科-CSS border-style

css outline是什么意思

CSS outline:none
当元素获得焦点的时候，焦点框为0.
比如说当前这个网页，你用tab键切换的时候，文字链接、搜索框、按钮等的外面会有一个虚线框（或高亮框），此时当前的元素就获得了焦点，你可以对它进行操作。
这个功能一般是为使用键盘操作的用户准备的。
有些链接——比如一个图片链接，你不想让他出现虚线框破坏设计感，就可以用此方法。
建议一般不要去掉，只在一些影响设计美感的地方用。毕竟这个焦点框对键盘用户是很有帮助的。
定义和用法
outline-style 属性用于设置元素的整个轮廓的样式。样式不能是 none，否则轮廓不会出现。
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。
注释：请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
注释：轮廓线不会占据空间，也不一定是矩形。
默认值： none
设置轮廓的样式：
p
{
outline-style:dotted;
}
浏览器支持
所有主流浏览器都支持 outline-style 属性。
只有在规定了 !DOCTYPE 时，Internet Explorer 才支持 outline-style 属性。
可能的值
值 描述
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。

CSS那些事儿

css中允许多个class：
《h1 class="green bold"》 ... 《/h1》 。

举例：如果同时有一个p元素和一个h1元素下都有一个 class = uppercase ，那么可以通过在类名前添加它的父类来加以区分：
注意：两个元素之间没有空格。(类似的， background-image: url(图片地址) ，url和后面的括号之间也不能有空格）

想要设置 《li》 ... 《/li》 的css样式，可以通过嵌套元素的设置方法设置：

同时选中：

通过用逗号分隔 .h1 和 .menu ， 这两个类都会被相应的css格式修饰。

CSS declarations are structured into property and value pairs.
CSS语句都是属性和值相对应的结构。
font-family 定义了元素的字体。
font-size 控制文字显示的大小。
font-weight 定义文字的粗细程度。
text-align 属性控制文字的对齐方式，可以取的分别为： left , right , center 。
文字可以有两种颜色属性：前景色—— color 和背景色—— background-color 。 color 控制文字的颜色， background-color 控制文字的背景色。
CSS中可以用 opacity 属性来令某个元素透明。
CSS中也可以通过 background-image 属性来设置某个元素的背景为一张图片。

除了颜色、边框样式、边框大小之外，还可以调节边框的圆角大小，单位也是 px ：

可以分别声明padding-top、padding-right、padding-bottom以及padding-left的值。
同时也可以直接声明 padding: 3px 4px 5 px 6px ，顺序分别是上、右、下、左。
使用上面这种写法时，所有边的padding数值都必须写明。
不过，如果上下、左右的padding值是相等的，也可以写作：
padding: 5px 10px ，这代表上下的padding都是5px，而左右的padding都是10px。

margin和padding类似，也有 margin-top 、 margin-right 、 margin-bottom 、 margin-left 。
同样可以写作
margin: 10px 20px 10px 2opx; 或者 margin: 10px 20px; ，表示上下边距为10px，左右边距为20px。
margin的叠加有一点特殊：
水平方向的叠加就是简单的数字叠加。例如，如果左边盒子 margin-right = 10px; ，而右边盒子的 margin-left = 20px; ，那么这两个盒子放置在一起时，他们交界处的 margin= 10 + 20 = 30px; 。
而竖直方向的情况则有所不同，对于叠放的两个盒子，如果上面盒子的 margin-bottom = 30px; ，而下面盒子的 margin-left = 20px; ，则交界处的 margin值 为：30px。
利用margin实现居中对齐：
首先需要父元素有固定的 width 或者 height 。比如如果想要让 div1 实现横向居中对齐，首先应该设置其父元素 div0 的 width= 400px ，然后在 css文件 中设置div1的margin值为： margin: 0 auto;

被父元素包裹着的子元素可能会占据空间过大而超过父元素的容纳范围，此时可以通过设置overflow的值来进行调整。
overflow的值可以为： scroll 、 hide 、 display 。

可以利用 display 属性来设置HTML元素的显示方式。
可以设置为： none , block , inline-block , inline 。
none 表示元素不显示；
block 表示显示为块级元素；
inline 表示显示为行内元素；
inline-block 表示显示为行内块级元素。
块级元素和行内块级元素可以设置 width height 属性，
而行内元素则不能。
注：一旦给元素加上absolute或float就相当于给元素加上了 display:block; 。

1. static属性：
static是html元素的默认position值，也就是按照正常的文档流排列。
2. fixed属性：
fixed的效果参见各种定在网页上的广告。
3. relative属性：
relative的元素是相对于自己的default position来定位的。

3.1 默认情况下：

可以看到与默认情况并无区别，
这是因为没有指定目标HTML元素相对其default position的偏移量。

结果：

结果：

结果：

结果：

通过float属性，可以使HTML元素脱离正常的文档流，竖直方向上将不再占用文档的空间，不过水平方向上不变。
比如可以利用这一特性，让序列横向排列:
HTML文件：

CSS文件：

默认情况下的结果：

利用float属性来ul元素横向排列：

结果：

此时只需要设置一下backPanel的height即可：

比如现在 ul元素 都没有父元素包裹了，上面只有一个 《p》 《/p》 元素，float之后的 ul元素 并不会“飞到”文档顶端去：

css中的color从类型上可以分为 color (前景色) 和 background-color ：

效果：

举例：

结果：

font-family: 字体名称;

font-weight: bold | normal;
也可以用数值来表示，数值的范围为且必须是100的整数倍。

举例：

font-style: italic; ——斜体；

text-transform: uppercase | lowercase;

text-align: left | right | center;

举例：

以上CSS语句的意思是：

注：
相对应地，也存在 非衬线字体 ： sans-serif fonts;

grid-template-columns: 100px 200px; 的意思是：将此网格分为两列。
其中，第一列的width = 100px，第二列的width = 200px。
宽度的单位也可以不是 px ，可以用 百分数 表示：

上面grid的宽度是1000px， 所以第一列的宽度是1000 * 20% = 200px；同理，第二列的宽度是500px。
也可以混用 px 和 % ：

这3列中，第一列width为20px，第二列为100 * 40% = 40px，第三列width为60px。
注意： 也就是说，总宽度20 + 40 + 60 = 120px，超过了100px，元素会超出grid的界限。

与定义 grid columns 是类似的:

结果：

结果：

通过单位 fr ，我们可以将行和列定义为对grid的length和width的划分——作用类似于 % ，但是用 % 是有超出父容器边界的风险的，而用 fr 则不用担心，因为浏览器会自动对grid进行划分。

如果行高或列宽相等，可以用 repeat() 函数来简化语句：

结果：

.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}

结果：

行间距同理：
grid-row-gap: 10px;
同时设置行、列间距：
grid-gap: 20px 10px; —— 一句话，分别设置行间距为20px，列间距为10px。
注：

这一简写形式并不需要 / ，如果只提供了一个值，比如： grid-gap: 10px; ，则相当于 grid-gap: 10px 10px; 。

简写形式：

同理，

同样，也可以写作：

span 可以明确地指出希望行或列跨越的距离：
比如，如果想要row从第4行开始，占两行，就可以直接写作：

不用 grid-row 的简写形式，也可以写作：

当然， span 也可以用在 grid-row-start 之后，浏览器会自动为我们计算出结果：

结果：

可以用一句话声明一个item占grid的多少行、列，并限定它在grid中的具体位置。

结果：

利用这个属性，可以先做出一个模板，然后让各个元素分别去“认领”他们所占的行和列。

比如 container 下面有5个板块:

注：
图中的grid是四行两列的，当header 和 header并列时，表示header占两列，此时header将占据整行，即使存在grid gap，依然不会将两个header分隔开。虚线只是为了便于理解，实际并不存在。

设置grid元素在每个格子中水平方向上的 对齐方式 。
justify-items 属性可以接收的值为：

注：这个属性是container中的，而不是每个item的。

设置grid元素在每个格子中竖直方向上的 对齐方式 ：
同样可以接收以下值：

注：这个属性是container中的，而不是每个item的。

设置整个grid在其父容器中，水平方向上的对齐方式：
可以取的值为：

同理，利用 align-content 属性可以设置整个grid在其父容器中，竖直方向上的对齐方式。
原理均与 justify-content 属性相似，不再赘述。

利用 justify-self 、 align-self 属性，可以分别设置grid的每个格子中，具体某个item在水平、竖直方向上的对齐方式。