CSS-基础（三）

最新推荐文章于 2024-07-19 15:20:42 发布

觅远

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量175

点赞数

分类专栏： web前端文章标签：定位 html css javascript

本文链接：https://blog.csdn.net/JBY2020/article/details/109710962

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

边框设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        div.di1{
            width: 100px;
            height: 100px;
            border-color: deepskyblue;  /*边框的颜色*/
            border-style: solid;  /*边框的样式*/
            border-width: 2px;  /*边框的宽度*/
        }
        div.di2{
            width: 100px;
            height: 100px;
            /*边框的复合模式：border: 边框宽度 边框样式 边框颜色*/
            border: 2px solid darkgreen;
        }
        div.di3{
            width: 100px;
            height: 100px;
            /*对上下左右的边框分别进行设置*/
            border-top: 1px solid red;
            border-right: 2px dashed green;
            border-bottom: 3px double yellow;
            border-left: 4px dotted chocolate;
        }
    </style>
</head>
<body>
    <div class="di1"></div>
    <div class="di2"></div>
    <div class="di3"></div>
</body>
</html>

边框样式

border-style值	描述
none	无边框
hidden	同none，应用表时，hidden用于解决边框冲突
dotted	点状边框
dashed	虚线边框
solid	实线边框
double	双线边框

内边距

内边距用来控制内容和所在div之间的距离，内边距设置产生的问题：内边距在设置后会增加div的整体宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        div.di1{
            width: 120px;
            height: 200px;
            color: deepskyblue;
            border: 1px solid sandybrown;
            padding: 30px;
        }
    </style>
</head>
<body>
    <div class="di1">自小刺头深草里，而今渐觉出蓬蒿。时人不识凌云木，直待凌云始道高。</div>
</body>
</html>

上边距：padding-top

下边距：padding-bottom

左边距：padding-left

右边距：padding-right

复合写法：padding （一个值表示上下左右设置一样的值；两个值表示上下、左右的值；三个值表示上、左右、下的值；四个值表示上、右、下、左）

外边距

外边距用来控制不同的div之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        div.di1{
            width: 100px;
            height: 100px;
            border: 2px solid royalblue;
            background-color: yellow;
            margin: auto;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="di1"></div>
</body>
</html>

上外边距：margin-top

下外边距：margin-bottom

左外边距：margin-left

右外边距：margin-right

复合写法：margin 这个值的设置同内边距中的padding

外边距自动居中：左右外边距的值都设置为auto，自动只对左右外边距生效，所以可以直接设置margin:auto，当只设置左外边距的值为auto时，div移动到页面最右边，只设置右外边距，div移动到页面最左边

设置外边距产生的问题

相邻兄弟div边距合并：设置两个div之间的距离时，垂直外边距结果取两个div中最大的外边距值，较小的值会被合并。所以在设置的时候，只需要设置一个div的外边距值即可。

父子div高度塌陷：解决办法是给父级div设置overflow: hidden。

重置CSS(RESET CSS)

重置CSS：浏览器在解析某些标签时，本身自带了一些样式，导致我们写样式的时候就会效果不一致.

重置的方法：使用通配符*重新定义样式，可以将重置样式存放到一个CSS文件中，在使用的时候直接引入，方便所有的文件使用。

参见：https://meyerweb.com/eric/tools/css/reset/

浮动

让块级元素具有行内块元素（同时具有块级元素和行内元素的特点）的方法：给块级元素添加dispaly:inline-block属性，但是每个元素之间后存在外边距。所以需要使用浮动。

浮动：让元素脱离正常的文档流移动到指定位置，设置浮动后类似于设置了inline-block（设置浮动后元素之间没有边距）。

添加浮动的方法：float属性，属性值为left和right两种。

清除浮动：为了解决父元素因为子元素浮动后高度为0的情况（元素浮动后不占有位置），清除浮动可以让父元素根据子元素的自动检测高度。

在这三种情况下适合使用清除浮动：1、父级没有了高度，2、子div浮动了，3、布局受到影响。

清除浮动的方法：

在最后一个元素后面添加一个div并指定clear属性，clear属性：属性值有三种，left清除左浮动，right清除右浮动，both清除所有浮动。
浮动使父元素高度塌陷，所以高度为0，同父子div高度塌陷的解决方法，给父元素添加属性：overflow: hidden，没有使用position时使用，不能和position配合使用，因为超出的尺寸的会被隐藏。
使用伪元素：定义公共类，以减少CSS代码。

定位

设置定位需要设置定位模式和边偏移量两个属性

边偏移量：上下左右属性，top属性、bottom属性、 left 属性、 right属性，属性值为偏移的像素值。

定位模式

定位模式（position属性值）	效果
static静态定位	默认值，不会发生任何变化
relative相对定位	以自身元素为参考，元素在偏移原来的位置后，空出来到的位置仍被占据，不会脱离文档流
absolute绝对定位	父元素没有没有绝对定位时，绝对定位的子元素会以网页为基准偏移；如果父元素有定位，绝对定位的子元素会以父元素为基准偏移；绝对定位的元素会脱离文档流，不再占有位置
fixed固定定位	子元素设置固定定位后会脱离文档流，以浏览器的可视区为基准进行偏移，位置不会随着窗口的滚动而改变

设置相对定位与绝对定位的原则：父元素为相对定位，子元素为绝对定位。

觅远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-基础（三）

边框设置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>边框</title> <style> div.di1{ width: 100px; height: 100px; border-color: deepskyblu
复制链接

扫一扫