css3基础整合

最新推荐文章于 2024-05-23 16:52:46 发布

W.樂�

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量160

点赞数 4

分类专栏： java 文章标签： css

本文链接：https://blog.csdn.net/AA_le/article/details/116998988

版权

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

4.美化网页元素

sapan标签：重点要突出的字
字体样式：
font-size：字体大小
font-family：字体样式
font-weight：blod：字体粗细
文本样式：
颜色
text-aline：排版对齐方式
text-indent：用em表示首行缩进
line-height行高
text-decoration：underline 下划线/none 取消a标签中的下划线
vertical-align：center ，文本图片水平对齐

5.文本阴影超链接

hover：鼠标悬浮的状态
active：点击后的状态
text-shadow：（阴影颜色，水平偏移，垂直偏移，阴影半径）阴影

6.列表

list-style：
none：去掉圆点
circle 空心圆
decimol 数字

7.背景图像应用及渐变

background-image:url(images/tx.jpg) 默认全部平铺
background-repeat：repeat-x：水平
background-repeat：repeat-y：垂直
渐变：
- background-img:linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);

8.盒子模型

margin外边距
padding：内边距
border边框
边框
边框的
border：粗细，样式，颜色

#box{
    width:300px
        border:1px solid red;
}

内外边距
padding
margin

圆角边框及阴影

border-radios：度数

    div{
            width: 100px;
            height: 100px;
            border: 10px solid goldenrod;
            border-radius: 100px;

        }

盒子阴影：

div{
    width: 100px;
    height: 100px;
    border: 10px solid goldenrod;
    border-radius: 100px;
    box-shadow: 10px 10px 100px yellow;

}

morgin：0 auto 居中
要求：块元素块元素有固定的宽度

10 父级边框塌陷问题

clear：right，右侧不允许有浮动
clear：left，左侧不允许有浮动
clear：both：两侧不允许有浮动
解决方案
增加父级元素高度
增加一个空的div标签
在父级元素中增加一个overflow：hidden
夫类添加一个伪类：after

#father:after{
    content:'',
    display:block;
    clear:both;
    
}

小结
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，父元素假设有了固定高度就会被限制
overflow
见到那，下拉的一些场景避免使用
在父类添加伪类after
写法稍微复杂一点，但是没有副作用，推介使用

对比

display
方向不可移动
float
浮动起来的话回脱离标准文档流，所以要解决父级边框塌陷问题。

11.相对定位的使用及练习

定位：
11.1相对定位
相对定位：相对于自己原来的位置进行偏移
position：relative
上：top
下：bootm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #box{
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 2px red;
    }
     a{
         width: 100px;
         height: 100px;
         text-decoration: none;
         background: aqua;
         line-height: 100px;
         text-align: center;
         color: wheat;
         display: block;
     }
     a:hover{
         background: #ffffff;
     }
     .a2,.a4{
         position: relative;
         left: 200px;
         top: -100px;
     }
     .a5{
         position: relative;
         left: 100px;
         top: -300px;
     }


</style>


<body>
<div id="box">
    <a class="a1">连接一</a>
    <a class="a2">连接二</a>
    <a class="a3">连接三</a>
    <a class="a4">连接四</a>
    <a class="a5">连接五</a>

</div>
</body>
</html>