赵新宇_2021.1.12 赵新宇

一、知识点总结

  • 圆角边框 border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性 这个属性允许你为元素添加圆角边框 例如:给div元素添加圆角的边框
div
{
    border:2px solid;
    border-radius:25px;
}
  • 外边距:margin 属性设置元素的外边距 外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以 为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型,外边距总是在计算可见部分 后额外添加
  • 外边距折叠:理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素,这些外边距将合并为一 个外边距,即最大的单个外边距的大小。 在下面的例子中,我们有两个段落。顶部段落的页 margin-bottom 为50px。第二段的 margin-top 为 30px。因为外边距折叠的概念,所以框之间的实际外边距是50px,而不是两个外边距的总和。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .one {
                margin-bottom: 50px;
                }
            .two {
                margin-top: 30px;
                }
        </style>
    </head>
    <body>
        <div class="container">
            <p class="one">I am handsome one.</p>
            <p class="two">You are ugly two.</p>
        </div>
    </body>
</html>
  • 盒子模型:完整的 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部 分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。

  • 2.5.1 盒模型的各个部分 CSS中组成一个块级盒子需要:

    Content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height ;

    Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置;

    Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置;

    Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属 性设置。

  • 背景样式:CSS background 属性是许多普通背景属性的简写。如果你在样式表中发现了一个复杂的背景属性,可 能会觉得难以理解,因为可以同时传入这么多值.

  • 背景附加:另一个可供选择的背景是指定他们如何滚动时,内容滚动。这是由 background-attachment 属性控制 的,它可以接受以下值:

    scroll : 使元素的背景在页面滚动时滚动。如果滚动了元素内容,则背景不会移动。实际上,背 景被固定在页面的相同位置,所以它会随着页面的滚动而滚动。

    fixed : 使元素的背景固定在视图端口上,这样当页面或元素内容滚动时,它就不会滚动。它将始 终保持在屏幕上相同的位置。

    local : 这个值是后来添加的(它只在Internet Explorer 9+中受支持,而其他的在IE4+中受支持), 因为滚动值相当混乱,在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元 素上,因此当您滚动元素时,背景也随之滚动。

  • 使用background的简写

    经常看到使用 background 属性指定的背景。这种简写允许您一次设置所有不同的属性

    background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px

    top right; 1 2 3 background 是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color, image, origin 与 size, repeat 方式等等。可以在一次声明中定义一个或多个属性: background-clip 、

    backgroundcolor 、

    background-image 、

    background-origin 、

    background-position 、

    backgroundrepeat 、

    background-size 、

    background-attachment 。

    对于所有简写属性,任何没有被指定的值都会被设定为它们的 初始值。

    语法如下: 在每一层中,下列的值可以出现 0 次或 1 次:只能紧接着 出现,以"/"分割,如: " center/80% ". 可能出现 0 次、1 次或 2 次。如果出现 1 次,它同时设定 background-origin(原点位置) 和 background-clip 。如果出现 2 次,第一次的出现设置 background-origin ,第二次的出现 设置 background-clip 。 只能被包含在最后一层。

  • 处理不同方向的文本

    默认浏览器对方向从左到右的文本(如英文或法文)的支持,要优于从右到左的文本(如阿拉伯语)的 支持。 然而,CSS在最近几年得到了改进,以更好地支持不同方向的文本,包括从右到左,也包括从上到下的 文本(如日文)——这些不同的方向属性被称为书写模式。

  • 书写模式:

    CSS中的书写模式是指文本的排列方向是横向还是纵向的。 writing-mode 属性使我们从一种模式切换 到另一种模式。 writing-mode 的三个值分别是:

    horizontal-tb : 块流向从上至下。对应的文本方向是横向的、

    vertical-rl : 块流向从右向左。对应的文本方向是纵向的、

    vertical-lr : 块流向从左向右。对应的文本方向是纵向的。

    因此, writing-mode 属性实际上设定的是页面上块级元素的显示方向——要么是从上到下,要么是从 右到左,要么是从左到右。而这决定了文本的方向。

  • 溢出的内容:

    我们知道,CSS中万物皆盒,因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢 出是在你往盒子里面塞太多东西的时候发生的,所以盒子里面的东西也不会老老实实待着。

    <style>
    .box {
    border: 1px solid #333333;
    width: 200px;
    height: 80px;
    }
    </style>
    <div class="box">这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多,就会出
    现溢出的情况。如果溢出设置为隐藏,则任何溢出都将不可见。</div>
    <p>此内容在方框之外。</p>

    一个盒子,在块方向上已经受到 height 的限制。然后我们已经加了过多的内容,以至于盒子里面没有 空间容纳。内容正在从盒子里面溢出,并让自己把盒子下面的段落弄得一团糟。 为什么CSS默认会采取如此不整洁的方式,让内容这么凌乱地溢出出来呢?为何不把多余的内容隐藏起 来,或者让盒子变大呢? 只要有可能,CSS就不会隐藏你的内容,隐藏引起的数据损失通常会造成困扰。在CSS的术语里面,这 会导致一些内容消失,你的访客可能不会注意到这一点,如果消失的是表格上的提交按钮,没有人能填 完这个表格,这是很麻烦的事情!所以CSS反而会把它以可见的形式溢出出去。这样做的结果就是,你 会看到错误的CSS导致的一片混乱,或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出 来,你的网站需要修缮。 2.9.1 overflow属性。

  • 文字的修饰:

    color:字体颜色
    font-size:字体大小,通常用像素(px)来定义大小
    font-weight:字体粗细
    - bold 加粗
    - normal 正常
    - 100~900为字体指定了 9 级加粗度,数字 400 等价于 normal,而 700 等价于 bold
    font-famliy:字体
    - Serif 字体
    - Sans-serif 字体
    - Monospace 字体
    - Cursive 字体
    - Fantasy 字体
    font-style:字体风格
    - normal - 文本正常显示
    - italic - 文本斜体显示
    - oblique - 文本倾斜显示
    text-decoration:字体加横线
    - none 无
    - underline 下划线
    - overline 上划线
    - line-through 贯穿线
    - blink 文本闪烁
    text-align:字体所处位置
    - left
    - right
    - center
    - inherit 继承父元素的text-align属性值
    line-height:行高,一般要纵向居中设置为 height 的高度
    text-indent:首行字的缩进 建议用em(缩进多少倍数)做为单位
    text-shadow:3px 4px 5px #AAA阴影 (CSS3的效果)
    - 3px向右偏移的像素值
    - 4px向下偏移的像素值
    - 5px 模糊效果
    - #AAA 阴影颜色
    vertical-align 设置元素的垂直对齐方式。
    - baseline 默认。元素放置在父元素的基线上。
    - sub 垂直对齐文本的下标。
    - super 垂直对齐文本的上标
    - top 把元素的顶端与行中最高元素的顶端对齐
    - text-top 把元素的顶端与父元素字体的顶端对齐
    - middle 把此元素放置在父元素的中部。
    - bottom 把元素的顶端与行中最低的元素的顶端对齐。
    - text-bottom 把元素的底端与父元素字体的底端对齐。
    /* 溢出文本处理 */
    overflow: hidden; /* 溢出部分 隐藏 */
    white-space: nowrap; /* 空白部分 不换行 */
    text-overflow: ellipsis; /* 溢出的文本变成省略号 */

    二、心得体会:

    ​ 今天是在云创学习的第二天,马老师带着我们把css的一些内容过了一遍,有很多之前没有接触过的像溢出文字处理和一些属性的简写,还有一些简便的快捷键,比如

    盒子可以通过快捷输入 ”div.名称“ 进行创建,期待接下来的学习!

评论

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