02 div css总结

这依旧是看月师傅视频的总结小文章，目的还是为了把知识再巩固一遍。之前总觉得这些东西自己应该会了，但是真正到自己用起来的时候可能就发现自己并不熟练或者一些细微的知识点自己并没有掌握。

div和css样式

层叠样式表是为了表现HTML或XML等文件样式的一门计算机语言，而CSS不仅可以静态修饰网页，还可以配合各种脚本语言动态的对网页各种元素进行格式化。

div是html的一个标签，css是一个样式表

 

样式表类型

　　嵌入样式表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .demo1{
                color: red;
                width: 100px;
                height: 100px;
                background: blue;
            }
            
        </style>
    </head>
    <body>
        <div class="demo1">
            demo1
        </div>
    </body>
</html>

在头部嵌入，这种模式在平常的练习中用的比较多。

　　导入外部样式　　

<link rel="stylesheet" href="css/style.css"/>

　　内联样式

<div style="color: blue;width: 100px;height: 100px; background: black;">demo2</div>

 

样式选择器

利用选择器，我们可以精确的选择和改变我们所希望改变的元素，就避免了在body中一个一个的去内联改变样式属性。

元素选择器  元素{属性：值}

ID选择器  #id{属性：值}

class选择器  .类名{属性：值}

子选择器  元素 空格 元素 {属性：值}

通配符选择器 *{属性：值}

群组选择器  元素1，元素2{属性：值}

 

背景

需要注意背景图片选择的方式以及滚动的方式

 

边框

边框颜色 border-color

边框宽度 border-width

还可以单独设置边框

边框样式：

none : 　无边框。与任何指定的border-width值无关

hidden : 　隐藏边框。IE不支持

dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

solid : 　实线边框（常用）

double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

 

列表

列表没有太多需要注意的，依旧是有序无序列表的标记的类型。

 

超链接

超链接这里需要注意一个超链接的伪类，所谓伪类就是指同一个标签，根据用户的状态不同，有不同的状态。

一共有四个状态

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标划过的链接

a:active 已选中的链接

这四个伪类选择器的使用顺序不能更改，更改就无法识别

 

盒子模型

所有的HTML元素都可以看作是盒子

盒子模型包括

外边距 Margin

边框 Border

内边距 Padding

内容 Content

 

float 脱离文档流浮动

这个样式我们可能在设计页面的搜索框或者页眉一些元素的时候我们可能会用到。

left 元素向左浮动

right 元素向右浮动

清楚浮动 clear:both or left right

 

块级元素、行内元素

块级元素独占一行，相邻的行内元素会排列在同一行内，直到行排不下，才会自动换行。

块级元素和行内元素还可以相互转换。

 

定位

position

固定定位  fixed 参照物-浏览器窗口

相对定位 relative 参照物-不加定位该元素应该在的位置（移动的位置）

绝对定位 absolute 参照物-它最近的父元素

 

posted @ 2022-01-08 21:35  r0nGer  阅读(32)  评论(0)    收藏  举报