前端Div+Css的布局方式

我就是我 2022-05-22 13:22 200阅读 0赞

> Div

div:<div></div>是块标签，它会占据一整行的空间
    span:<span></span>是行内的块标签，它可以选中一整行中的部分元素

> Css

1，Css的添加方式  
①内嵌的方式

<div style="height:1cm;background-color: yellowgreen;">我觉得OK</div>

②内部添加的方式

<div id="id1">我觉得还行！！</div>

③连接外部样式的方式

链接外部文件：<link rel="stylesheet" href="css/index.css" type="text/css"/>

index.css内容：
    #id2{ background-color: lightseagreen; width: 100px; }

2，选择器（指明对哪个元素或哪个部位进行修改）

2.1常用选择器：

①id选择器：
    
    <div id="taobaoId">淘宝</div>
    
    ②class选择器：
    
    <div class="JD1Class JD2Class">京东</div>
    
    ③元素选择器：
    span{
        background: fuchsia;
    }
    ④属性选择器：
    <span arr="test">虎牙</span>
    
    span[arr="test"]{
        background-color: wheat;
    }

2.2 选择器优先级

①多个不同的样式作用于一个元素，样式会叠加，相同的样式，根据代码的距离远近采用最近原则展示
    ②多个选择器作用于一个元素，选择器的作用范围越小，其优先级越高。如id选择器>属性选择器>元素选择器>class选择器

3，了解的选择器

后代选择器：
    <div>
         <span>888</span>
    </div>
    
    div span{
        background-color: brown;
    }

锚伪类选择器：
    <a href="#">rrr</a>
    
    a:link{
        color: #8A2BE2;
    }
    a:visited{
        color: #A52A2A;
    }
    a:hover{
        color: #F5DEB3;
    }
    a:active{
        color:gold;
    }

4，修改元素或部位。（对哪个元素或部位如何修改？）

①改变字体：font-xxx,如字体大小，字体类型等  
② 改变文本：改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进  
color:文本颜色  
line-height:行高  
text-decoration:向文本添加修饰  
text-align:文本对齐

③ 改变列表：  
list-style-type:设置列表项类型。如排列顺序用字母或数字等  
list-style-image:设置图片为列表项类型，用到url函数url(“图片路径”);

④ 改变背景  
background-color:设置背景颜色  
background-image:设置图片为背景,用到url函数url(“图片路径”)

⑤ 尺寸  
width:设置宽  
height:设置高

⑥ 显示元素的类型  
display:none 隐藏该元素  
display:black 将该元素定义为一块，类似div的作用  
display:inline 将该元素定义为内联元素，类似于span的作用

⑦设置框模型的属性

内边距为：元素到边框距离，padding
    边框为：border
    外边距为：元素间距离，margin

其中，边框border的简写风格为：

border:宽度  类型  颜色
    如border:5px solid red

5，元素或哪个部分如何布局

①float:使元素浮动  
clear:清除浮动

②对于同一行的元素，可通过比例调整布局

<div class="outside">
                <div class="inner">1</div>
                <div class="inner">2</div>
                <div class="inner">3</div>
    </div>
    
    .outside{
        width: 100%;
    }
    .inner{
        float: left; 
        width:33.3%
    }

③在调整时，发现添加了修改语句，但还是没效果，那可以逐层修改状态，去找其的外层Div，修改外层Div的状态。

④调整布局：一般都是先确定浮动对象，然后再设定宽度比例，然后再设置排列方式，高度。然后重复操作。float浮动->width设比例->排列如text-align:center->设置高度