王宇凡_20210112王宇凡

知识点总结

CSS

border属性

border : width style color ;

border属性值的书写顺序;1.粗细(width),2.风格(style) ,3.颜色(colour)

margin属性

margin: value1 value2 ...;

margin 如果值超过一个,按上右下左(顺时针)的顺序渲染,如果缺省则上和下一样,左和右一样 (对

称的值一样)

盒子模型

1:标准盒子模型

在标准模型中,设置的宽和高实际时内容区域即content box,不包含内外边距。因此实际盒子大小是设置的宽值加上内外边距。

2:替代盒子模型

在替代模型中,设置的宽度是内外边距加起来共同决定盒子大小。因此content box(内容区域)的宽度是设置的宽度减去内外边距后的大小。默认浏览器使用标准盒子模型,可以通过设置盒子的属性来使用替代盒子模型

.box { box-sizing: border-box; }

display

display属性规定元素是哪种区域(框)。

display有五种基本的值

flex:弹性区域
block:元素呈现块元素特征,此元素前后会带有换行符
inline:元素呈现行内元素特征,元素前后没有换行符
inline-block:元素呈现行内并保持宽和高的属性,行内块元素
none:元素不做呈现,不占网页空间。与visibility:hidden不同,visibility不显示但占用网页空
间。

display: inline-block:一个中间状态。不换行但是可以设置高度和宽度。

背景样式(background)

背景颜色:
1:#567895或者black直接设置颜色
2:rgb(255,255,255) 或者rgba(255,255,255,.5),a为透明度
3:hsl(h 色相 0 到 360, s 饱和度 0% 为灰色, 100% 全 色, l 亮度 0% 为暗, 50% 为普通,  100% 为白) hsla(),a为透明度

HSLA颜色体验

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>hls颜色体验</title>
    <style type="text/css">
        div{
            background-color: red;
            width: 100px;
            height: 100px;
        }
        input{
            display: block;
        }
    </style>
    <script type="text/javascript">
        function a(){
            var color = document.querySelector("#color");
            var sexiang = document.querySelector("#sexiang");
            var baohedu = document.querySelector("#baohedu");
            var light = document.querySelector("#light");
            var toumingdu = document.querySelector("#toumingdu");
            var btn = document.querySelector("#btn");
            color.style.backgroundColor = "hsla(" + sexiang.value + "," + baohedu.value + "," + light.value + "," + toumingdu.value + ")";
        }
    </script>
</head>
<body>
    <div id="color"></div>
    <input id="sexiang" type="text" placeholder="色相值(0-360)"/>
    <input id="baohedu" type="text" placeholder="饱和度(0-100%)" />
    <input id="light" type="text" placeholder="亮度(0-100%)" />
    <input id="toumingdu" type="text" placeholder="透明度(0.0-1.0)" />
    <button id="btn" onclick="a()">提交</button>
</body>
</html>
渐变色

linear-gradient 线性梯度渐变,延伸到整个盒子上。

background: linear-gradient(to right, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);

第一个变量可设置为

1:to right 从左侧开始的线性渐变
2:to bottom right 从左上角到右下角
3:Xdeg 线性渐变指定一个角度,x为角度
内容溢出

overflow属性是控制溢出的方式,此属性有以下几种值

visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 隐藏掉溢出。其余内容是不可见的。
scroll 显示滚动条,即使没有足够多引起溢出的内容
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

在新闻网资讯网中大量存在标题溢出。一般用以下形式解决

.text{
    overflow: hidden;/* 省略溢出的文字 */
    white-space: nowrap;/* 段落中取消换行 */
    text-overflow: ellipsis;/* 文本溢出后显示省略号 */
}
字体文字

字体:font-family

font-weight:字体粗细

- bold 加粗 
- normal 正常 
- 100~900为字体指定了 9 级加粗度,数字 400 等价于 normal,而 700 等价于 bold

字体风格:font-style

- normal - 文本正常显示
- italic - 文本斜体显示 
- oblique - 文本倾斜显示

心得体会

今天的学习内容非常充实,不但补充了之前遗漏的内容,也扩展了新的知识。今天学的CSS,复习到了之前学过的内容,让自己的知识再次梳理一遍,也扩充了自己对各种渐变色和颜色背景等等的认知,也知道了很多基本的属性的默认值,让我在写前端的过程中效率更高,也对后续的学习方法有了很大的帮助。有利于对知识的自我扩充和查漏补缺,然后结合所学的内容进行小小的体验和实践。希望在日后的学习中,更加的认真,不漏掉每一个知识点。

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1