2W前端学习day4

最新推荐文章于 2024-09-13 10:46:15 发布

糖醋排骨12356

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量35

点赞数

文章标签：前端学习 html5

本文链接：https://blog.csdn.net/weixin_68489142/article/details/131599787

版权

overflow 属性

处理子级内容超出当前容器的部分，只要是对父级元素添加该属性

值：

hidden 超出部分隐藏

scroll 滚动查看超出的部分

auto 自动渲染超出的部分

overflow-x 控制x轴方向那个超出的部分

overflow-y 控制y周方向那个超出的部分

white-space:设置文本的格式

nowrap 强制不换行

normal 强制换行

text-overflow:对超出的文本的内容进行剪裁

ellipsis 超出的内容变为省略号

clip 直接裁掉超出的文本内容

单行文本超出添加省略号

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

font-style 设置字体的样式

值：

italic 设置字体斜体

normal 设置字体正常

font-weight 设置字体是否加粗

值：

normal 默认

bold 加粗

bolder 相对bold加粗

他的值也可以是具体的整百数字，范围是 100-900

400 -> normal

700 -> bold

900 -> bolder

font-size 是设置所修饰的字体的大小

1.目前浏览器默认字体大小是 16px

2.pc端六零年起的最小字体大小可以设置为12px

font-family 设置文字字体

可以同时设置多个字体，形如：

font-family：'A','B','C'...;

含义是在客户端的设备上匹配A字体，如果没有A字体，则继续匹配B字体，依次进行匹配，直到匹配成功即可显示匹配到的字体

通用字体

1.serif 有衬线(类似锐化)

2.sans-serif 无衬线

font 也是一个复合型 css 属性

可以直接按照下面的顺序书写

font:style weight size family;

注意：style 和 weight 不是必须写入的内容，如果简写必须要有 font-size和

font-family

font:size family;

background 设置标签元素的背景

background-color 设置背景色

它的值是：

1.英文单词

2.16进制表示颜色

3.rgb()表示颜色

background-image 设置背景图

background-image:url(背景图地址)

background-repeat 背景图的平铺方式

值：

repeat 默认，x轴y轴都平铺

repeat-x 沿x轴平铺

repeat-y 沿y轴平铺

no-repeat 不平铺

background-position 设置背景图定位

background-position：x轴方向的值，y轴方向的值；

值可以是：

1.具体的数值

2.方位名词组合

left top right bottom center

background-attachment 设置背景图固定定位

值：

scroll 默认值，背景图片跟着页面滚动

fixed 根据浏览器可视区域，固定在具体位置，它的定位参考点是浏览器可视区域

background 是一个复合型属性，可以写在一起，他的顺序是

background：color image repeat position attachment

可以单独写

background:color;

background:image;

隐藏一个标签元素

display:none;

display 属性可以用来控制标签元素的显示属性

值：

block 把元素转化为块标签属性

inline 把元素转化为行属性标签

none 隐藏标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display属性</title>
    <style>
        .wp{
            width: 200px;
            height: 200px;
            background: #04be02;
            display:none;

        }
        .line{
            border: 1px #f00 solid;
            width: 200px;
            height: 200px;
            display: block;
        }
        h1{
            display: inline;
            border: 1px #f00 solid;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="wp"></div>
     <h1>犯我德邦者，虽远必诛</h1>
     <h1>犯我德邦者，虽远必诛</h1>

     <div>
     <a href="###" class="line">真诚是永远的必杀技</a>
     <a href="###" class="line">真诚是永远的必杀技</a>
    </div>
     
</body>
</html>