CSS基础

最新推荐文章于 2024-06-19 16:19:47 发布

shura.xl

最新推荐文章于 2024-06-19 16:19:47 发布

阅读量14

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_79108021/article/details/131775428

版权

盒模型

padding属性设置元素内边距

上内边距右内边距下内边距左内边距

padding-top padding-right padding-bottom padding-left

margin属性跟 padding 同理

border属性

border-width 宽 border-solid 实线 dotted 点状边框 double 双线

box-sizing ：content-box 默认盒模型

opaciy:属性值0~1 透明度

overflow：scroll 内容溢出增加滚动条

dispiay：none 隐藏 display：block 显示

鼠标样式

hand pointer 手型样式 nw-resize 想左上的键头 e-resize 向右的箭头

crosshair 十字型样式 ne-resize 向右上的箭头 n-resize 向上的箭头

text 移动到文本上的效果 w-resize 向左的箭头 sw-resize 向左下的箭头

wait 等待的效果 s-resize 向下的箭头 se-resize 向右下的箭头

default 默认效果 auto 系统自给的效果

溢出的处理

overflow 如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪。

overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。

overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。

visible 不裁剪内容，可能会显示在内容框之外。

hidden 裁剪内容 - 不提供滚动机制。

scroll 裁剪内容 - 提供滚动机制。

auto 如果溢出框，则应该提供滚动机制。

4.rem根元素字体大小

浏览器默认字体大小为16px

em是以父元素字体为基准的

rem是以根元素字体大小为基准的

轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

display属性

none 此元素不会被显示。

block 此元素将显示为块级元素。特征：换行，可设置宽高尺寸。

inline 行内元素，默认。特征:大小自适应；不换行。

inline-block 行内块元素。特征:可以设置大小，但是不可以换行。

其他：list-item/table/inline-table/table-cell/table-caption......

浮动

Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

左浮动:不脱离文本流脱离文档流

有浮动：文本流文档流都脱离

使用浮动元素会变为行内快元素

使用浮动对兄弟元素造成影响，对付容器也造成影响，如果子元素全部浮动父元素坍塌

（清除浮动）解决浮动带来的影响

1.给父容器添加高度

2.给使用浮动的元素后面添加clear：both;

3.after伪类（元素：after{content："";display:block;clear:both}）

4.overflow:hidden;

下面是一个导航栏实例

<!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>导航栏</title>
    <link rel="stylesheet" href="./7.css">
    <!-- 外部样式 link引入 -->
</head>
<body>
    <div id="ace">
        <ul>
            <li><a href="">中国</a>
                <ul class="ddd">
                    <li><a href="">版图</a></li>
                    <li><a href="">民族</a></li>
                    <li><a href="">地区</a></li>
                </ul>
            </li>
            <li><a href="">日本</a>
                <ul class="ddd">
                    <li><a href="">版图</a></li>
                    <li><a href="">民族</a></li>
                    <li><a href="">地区</a></li>
                </ul></li>
            <li><a href="">美国</a>
                <ul class="ddd">
                    <li><a href="">版图</a></li>
                    <li><a href="">民族</a></li>
                    <li><a href="">地区</a></li>
                </ul></li>
            <li><a href="">德国</a>
                <ul class="ddd">
                    <li><a href="">版图</a></li>
                    <li><a href="">民族</a></li>
                    <li><a href="">地区</a></li>
                </ul></li></li>
            <li><a href="">俄罗斯</a>
                <ul class="ddd">
                    <li><a href="">版图</a></li>
                    <li><a href="">民族</a></li>
                    <li><a href="">地区</a></li>
                </ul></li></li>
            <li><a href="">英国</a>
                <ul class="ddd">
                    <li><a href="">版图</a></li>
                    <li><a href="">民族</a></li>
                    <li><a href="">地区</a></li>
                </ul></li></li>
        </ul>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    /* 重置默认 */
}
ul li{list-style: none;}
/* 去掉无序列表前的点 */
#ace{
    width: auto;
    height: 60px;
    background-color: floralwhite;
    /* 为div盒子设置宽高以及背景颜色 */
}
#ace>ul>li{
    float: left;
    width:  270px  ;
    height: 60px;
    text-align: center;
   line-height: 60px;
   font-size: 20px;
   /* 为li标签设置左浮,宽,高,文本水平居中,文本垂直居中,文本字体大小 */
}
a{
    text-decoration: none;
    /* 给链接标签a去掉下划线  */
    color: black;
    /* 字体颜色 */
}
li:hover{background: aqua;
    /* 设置鼠标在li标签位置悬浮时的颜色 */    
}
a:hover{
    color: coral;
    font-size: 30px;
    /* 设置鼠标在a标签位置悬浮时的颜色以及字体大小 */
}
.ddd{
display: none;
/* 隐藏该标签 */
}
#ace>ul>li:hover .ddd{
    display: block;
    /* 鼠标在此标签位置悬浮时显示该标签 */
}
li{
    border-radius:15px;
      /* 设置圆角 */
}

结果

shura.xl

关注

0
点赞
踩
0

收藏

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

text 移动到文本上的效果 w-resize 向左的箭头 sw-resize 向左下的箭头。其他：list-item/table/inline-table/table-cell/table-caption......轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
复制链接

扫一扫