css基础

lsbdgyd

已于 2022-07-02 20:01:08 修改

阅读量64

点赞数

文章标签： css 前端

于 2022-05-09 15:38:15 首次发布

本文链接：https://blog.csdn.net/lsbdgyd/article/details/124658332

版权

css样式表：内联外联行内式

样式表的优先级：!important > 行内>内联>外联

选择器：

 元素选择器：   
     div{color: #000}
    class选择器：  
    .class名{ color: #000}
    id选择器：     
    #id名 { color: #000}
    通配符选择器： 
     *{ color: #000}
    群组选择器：  
     div,p {color: #000}
    后代选择器：  
      div p {color: #000}
    伪类选择器：
    a:link 超链接初始状态
    a:visited 超链接被访问后的状态
    a:hover   鼠标悬停 划过的状态
    a: active  鼠标按下时的超链接状态

选择器的权重值：

选择器的权重：

类选择器权重0001

class选择器权重0010

id选择器权重0100

包含选择器包含选择器权重之合

内联样式权重1000

！important 权重10000

css文本属性：

css 文字属性：
            font-size: 16px; 文字大小
            font-family: 微软雅黑; 
            color: red;  字体颜色
            font-weight: 700; 加粗
            font-style: ; 倾斜
            text-align: center; 文本对齐方式
            line-height: 300px; 行高
            text-indent: ; 首行缩进
            letter-spacing: ; 字间距
            text-decoration: ; 文本修饰 下划线 上划线 删除线
            font: ; 简写 
            text-transform: ; 首字母大小写

列表属性：

            list-style-type: ; 定义列表符合样式
            list-style-image: ; 图片设置为列表符合样式
            list-style-position: ; 设置列表项标记的放置位置
            list-style: none;  简写  去除列表符号

背景属性：

背景属性：
   background-color: rgba(red, green, blue, .5); 透明度 
   background-image: ; 背景图
   background-repeat: ; 是否平铺
   background-position: ; 背景图片的定位

   background-attachment: ; 背景图片的固定   视觉差 
   scroll 滚动   fixed固定
   background-size: cover; 背景图片大小  
   cover完全覆盖  contain 完美包含 



   background-size 只能单独使用
   简写
     background: url()  no-repeat center fixed yellow;

浮动属性：

float: left;

清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    总结：  1给父元素加上固定的高度
           2给后一个盒子上面加上clear: none;
           3当前浮动元素后面补一个盒子 不设置宽高
           4给父盒子加上overflow：hidden；


    <style> 
        .box1,.box2 {
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1 {
            background-color: yellow;
        }
        .box2 {
            background-color: blue;
        }
        /* 
            方案2：
            清浮动 clear：none ；
            要加在后面元素的属性上
        */
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
            clear: none;
        }
        /* 
            方案1：
            写死固定高度 
        */
        .container {
            //height：200px；
            overflow: hidden;
        }

        /* 方案4： 在父盒子上加上 overflow：hidden； */
    </style>
</head>
<body>
        <div class="container">
            <div class="box1"></div>
            <div class="box2"></div>
            <!-- 方案三  当前浮动元素后面补一个盒子 不设置宽高 -->
            <!-- <div style="clear: none;"></div> -->
        </div>
        <div class="box"></div>
</body>
</html>

盒子模型：

内边距 padding （上右下左）

边框 border: 10px solid red ;

外边距 margin （上右下左）

文本溢出属性：

 1 溢出属性：
         overflow： visible 默认值 溢出内容显示在元素之外
                    hidden 隐藏
                    scroll 滚动 溢出内容以滚动方式显示
                    auto 如果有溢出添加滚动条 没有溢出正常显示
                    inherit 规定应该遵循从父元素继承 overflow属性的值
                    overflow-x X轴溢出
                    overflow-y Y轴溢出

        2 空余空间
            white-space：
                    normal 默认值  空白会被浏览器忽略
                    nowrap 文本不会换行 文本会在同一行上继续，遇到br标签为止
                    pre  显示空格，回车 不换行
                    pre-wrap 显示空格 回车 换行
                    pre-line 显示回车 不显示空格 换行

pre标签

<pre>
               预格式化文本- 保留空格  teb  回车
               div {
                border: 10px solid red ;
                overflow: hidden;
                white-space: nowrap;
            }
</pre>

元素显示类型：

 块元素： 
        display: block;
         块级元素在网页中就是以块的形式显示
         默认情况下 块级元素会独占一行，块级元素会按顺序自上而下排列
         会级元素 可以定义自己的宽高
         块级元素一般都是作为其他元素的容器 容纳其他行内元素和块级元素

         div p ul li ol li dl dt dd h1 - h6 、
行内元素：
        display: inline;
行内块元素 ：
        display: inline-block;

display：none ：隐藏

定位：

position: relative; 相对定位

不脱离文档流相对于自己初始位置

position: absolute; 绝对定位

position: fixed; 固定定位

position: sticky; 粘性定位

浮动跟定位的区别

float：半脱离设计初衷是作为文字环绕效果的

absolute ：全脱离脱标之后完全覆盖其它内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 文字环绕效果 */
            float: left; 
            /* 完全覆盖 */
            position: absolute;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero cum molestias expedita corrupti fugiat sunt eos deleniti at, ea eaque reiciendis unde. Sed itaque qui excepturi exercitationem veniam officia cupiditate!
    </div>
</body>
</html>

锚点：