2021-07-22 初学CSS布局 (loading......)

最新推荐文章于 2023-12-21 10:03:45 发布

泥烟

最新推荐文章于 2023-12-21 10:03:45 发布

阅读量111

点赞数

分类专栏：前端文章标签： css 网页设计 html5

本文链接：https://blog.csdn.net/qq_39391544/article/details/118996359

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

边框模型

真正决定一个元素的表现形式，是由其边框模型决定的
由图所示
蓝色框即为内容
width:70px 表示内容的大小
红色框即为边框
内容到边框之间的距离，即为内边距 5px
灰色框，是指边框与其他元素之间的距离，即为外边距：10px

.box{

width:70px;

padding:5px;

margin: 10px;

}

内容宽度70px

内边距：5px

外边距：10px

超链状态

伪类，所谓的伪类即被选中的元素处于某种状态的时候
超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候

<style>
a:link {color: black}
a:visited {color: green}
a:hover {color:yellow}
a:active {color: red}
</style>
 
 
<a href="http://www.12306.com">超链的不同状态</a>

光标放上去之后

点击但未回弹时

CSS代码

div.menu {
    width: 80px;
    border: 1px solid rgb(156, 152, 152);
    margin-top: 30px;
    position: absolute;
    left: 80px;
    top: 50px;
}

div.menu a {
    display: block;
    color: #888;
    cursor: pointer;
    padding: 10px 0px 10px 20px;
    text-decoration: none;
}

div.menu a:hover{
    background-color: rgb(224, 222, 57);
    color: rgb(173, 26, 0);
}

HTML代码

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./下拉列表.css">
</head>

<body>
<div class="menu">
    <a href="https://www.bilibili.com/">bilibili</a>
    <a href="https://www.cnblogs.com/Knight02/">博客园</a>
    <a href="https://blog.csdn.net/qq_39391544">CSDN</a>
    <a href="https://www.zhihu.com/hot">知乎</a>
</div>
 
</body>
</html>

内联(inline)是不换行，但是不能指定大小
块级(block)时能指定大小，但是会换行
有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block

line-height 适合单独一行垂直居中

padding 借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上

<style>
#d {
line-height: 120px;
} 
div{
  border:solid 4px lightskyblue;
}
</style>

<div id="d" align="center">line-height 适合单独一行垂直居中</div>

<style>
#d {
	padding: 30 30;
}
div{
 	border:solid 1px lightskyblue;
}
</style>

<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容  </div>

<style> 
#div1
        {
            position: relative;
            height: 300px;
            width: 100%;
            background-color: pink;
        }
        #div2
        {
            position: absolute;
            bottom: 0;
            height: 30px;
 			width: 100%;
            background-color: skyblue;
        }
    </style>

<div id="div1">
	<div id="div2"> 无论粉色div高度如何变化，蓝色div都会贴在下面
	</div>
</div>

泥烟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-07-22 初学CSS布局 (loading......)

边框模型真正决定一个元素的表现形式，是由其边框模型决定的由图所示蓝色框即为内容width:70px 表示内容的大小红色框即为边框内容到边框之间的距离，即为内边距 5px灰色框，是指边框与其他元素之间的距离，即为外边距：10px.box{width:70px;padding:5px;margin: 10px;}内容宽度70px内边距：5px外边距：10px超链状态伪类，所谓的伪类即被选中的元素处于...
复制链接

扫一扫