day 46

时间 2019-11-16

标签 day 繁體版

原文原文链接

目录css

CSS样式操做

CSS样式操做

给字体设置长宽

只有块级标签才能够设置长宽html

行内标签设置了没有任何做用(仅仅只取决于内部文本值)浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yeah</title>
    <style>

        div {
            width: 200px;
            height: 100px;
        }
        span {
            width: 500px;
            height: 400px;
        }

    </style>

</head>
<body>
<div>
    div
</div>
<span>span</span>

</body>
</html>

字体颜色

color后面能够跟多种颜色数据字体

颜色英文：red
rgb(1,1,1)：能够利用截图软件获取三基色数字,数字范围只能是0~255
直接使用 pycharm 提供的取色器
rgba(128,128,128,0.4)：最后一个数字能够调节颜色的透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YEAH</title>
    <style>
        p {
            font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
            font-size: 48px;
            font-weight: lighter;
            /*color: red;*/
            /*color: rgb(156,59,24);*/
            /*color: #c3ff69;*/
            color: rgba(61,94,86,0.7);
        }
        
    </style>

</head>
<body>

<p>
    鹅鹅鹅，曲项向天歌。
</p>

</body>
</html>

语义

a {
text-decoration: none;
}
取消a标签默认的下划线ui

背景图片

默认是铺满整个区域url

一般一个页面上的一个个小图标，并非单独的，而是经过一个很是大的图片，该图片上有网址所用到全部的小图标。spa

经过控制背景图片的位置，来显示不一样的图标样式code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YEAH</title>
    <style>
        #d1 {
            height: 800px;
            background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573737709470&di=3763ef1067405bd66e3c372343454bc6&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201608%2F24%2F20160824232248_PdVQU.jpeg");
            background-attachment: fixed;
        }

    </style>

</head>
<body>
<div style="height: 600px;background-color: red"></div>
<div style="height: 600px;background-color: blue"></div>
<div id="d1"></div>
<div style="height: 600px;background-color: greenyellow"></div>
</body>
</html>

边框

后面跟三个参数htm

颜色，字体，样式继承

能够单独设置：样式，颜色，粗细

border-top-style:dotted;

border-top-color:red;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:none;

能够单独设置某一边的样式

border-top: 3px solid red;

border-left: 1px dotted green;

border-right: 5px dashed blue;

border-bottom: 10px solid pink;

也能够简写统一设置

display

inline 将块级标签变成行内标签

block 可以将行内标签设置成长宽和独占一行

inline-block 便可以设置长度，也能够在一行展现

display:none 隐藏标签，而且标签原来占的位置也消失了

visibility:hidden 隐藏标签，可是标签原来的位置还在

盒子模型

以快递盒为例

1.两个快递盒之间的距离(标签与标签之间的距离)

2.快递盒盒子的厚度(边框border)

3.快递盒中的物品距离内边框的距离(内部文本与内边框之间的距离)

4.物品的大小(文本大小)

margin: 10px; 只写一个参数，上下左右全是

margin: 10px 20px; 第一个控制的是上下，第二个则是左右

margin: 10px 20px 30px; 第一个控制的是上，第二个是左右。第三个是下

margin: 10px 20px 30px 40px; 第一个控制的是上，第二个是右，第三个是下，第四个是左

margin:0 auto; 左右居中，不能上下居中

浮动(**************)

float

在CSS中，任何元素均可以浮动。

浮动的元素，是脱离正常的文档流(原来的位置会空出来)

浏览器会优先展现文本内容(**********)

浮动带来的影响

会形成父标签塌陷

clear

可清除浮动带来的影响

.clearfix:after {
    content: '';
    clear: both;    /*左右两边都不能有浮动的元素*/
    display: block;
}
哪个父标签塌陷了，就给它加clearfix这个类属性值

overflow溢出属性

visible 默认值。内容不会被修改，会呈如今元素框以外

hidden 内容会被修剪，而且其他内容是不可见的

scroll 内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。

auto 若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容

inherit 规定应该从父元素继承 overflow属性的值

定位

全部的标签默认都是静态的，没法改变位置

position: static;

必须将静态的状态修改为定位以后

相对定位(了解) relative

相对于标签原来的位置，移动

绝对定位(购物车) absolute

相对于已经定位过(只要不是static均可以 relative)的父标签，再作定位(**************)

固定定位(回到顶部) fixed

相对于浏览器窗口，固定在某个位置不动

位置的辩护是否脱离文档流

1.不脱离文档流

相对定位

2.脱离文档流

浮动的元素

绝对定位

opacity

既能够调颜色，也能够调字体

1. 监控系统 day-46
2. day 46 html 标签补充
3. 《从零开始学Swift》学习笔记（Day 46）——下标重写
4. Flutter Weekly Issue 46
5. 46. Permutations
6. 46、Snap
7. Permutations(46)
8. 46.Permutations
9. Day learn,day up
10. Day Day UP UP !
更多相关文章...
• PHP juliantojd() 函数 - PHP参考手册
• jQuery Mobile 表单选择菜单 - jQuery Mobile 教程
• JDK13 GA发布：5大特性解读
• 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解