CSS权重，属性书写顺序，布局技巧和网页布局总结，盒子模型排列位置---CSS

最新推荐文章于 2023-01-24 15:58:35 发布
最新推荐文章于 2023-01-24 15:58:35 发布
阅读量667 收藏
点赞数
分类专栏： # HTML&CSS&Sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H200102/article/details/111147775
版权

文章目录

一、CSS权重

注意：类选择器、属性选择器、伪类选择器，权重为 10。

参考看 CSS三大特性，在CSS的特性优先级中有介绍

复合选择器：
在这里插入图片描述
权重及计算
在这里插入图片描述

在这里插入图片描述

二、CSS属性书写顺序

在这里插入图片描述

一、布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

  1. 标准流
    可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
  2. 浮动
    可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
  3. 定位
    定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

二、常见布局技巧

巧妙利用一个技术更快更好的布局：

  1. margin负值的运用
  2. 文字围绕浮动元素
  3. 行内块的巧妙运用
  4. CSS三角强化

1.margin负值运用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin负值的巧妙运用</title>
    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* ul li:hover {
           1. 如果盒子没有定位，则鼠标经过添加相对定位即可
        position: relative;
        border: 1px solid blue;

       } */
        ul li:hover {
            /* 2.如果li都有定位，则利用 z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

2.文字围绕浮动元素
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字围绕浮动元素的妙用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 0 auto;
            padding: 5px;
        }
        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }
        .pic img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="images/img.png" alt="">
        </div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
</body>
</html>

3.行内块巧妙运用

CSS修改前端分页的样式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内块的巧妙运用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
       .box .prev,
        .box .next {
            width: 85px;
        }
        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }
        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }
        .box button {
           width: 60px;
           height: 36px;
           background-color: #f7f7f7;
            border: 1px solid #ccc;
            
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第 
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>
</html>

4.CSS 三角强化
CSS实现直角三角形

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS三角强化的巧妙运用</title>
    <style>
         .box1 {
            width: 0;
            height: 0;
            /* 把上边框宽度调大 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue; */
            /* 左边和下边的边框宽度设置为0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */
           /* 1.只保留右边的边框有颜色 */
           border-color: transparent red transparent transparent;
            /* 2. 样式都是solid */
            border-style: solid;
            /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
            border-width: 100px 50px 0 0 ;

        }
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color:red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;

        }
        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="price">
            <span class="miaosha">
                ¥1650
                <i></i>
            </span>
            <span class="origin">¥5650</span>
        </div>
</body>
</html>
H千面
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3------盒模型
m0_59749255的博客
11-25 1569
内边距是用来改变内容位置，由于默认页面的布局方向是从上到下，从左到右的。内边距是用来改变内容位置，由于默认页面的布局方向是从上到下，从左到右的。属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将垂直方向上的相邻盒子向下推。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将垂直方向上的相邻盒子向下推。盒子自身不动，将垂直方向上的相邻盒子向下推。
css盒子模型
恰巧喜欢的博客
11-05 748
CSS（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页可以看成是由盒子从上到下，从左到右或者嵌套的方式进行排列的。
css-上下布局，上面高度任意值，下面盒子自适应填满剩余部分
wang_59881的博客
12-15 3490
已知整个盒子的高度为500px，上下布局，上盒子任意高度，下面盒子都可以自适应填满剩余部分，上下盒子都不知道高度。
CSS层叠上下文、层叠顺序和层叠等级
syzdev的博客
03-19 2834
0 前言 在讨论层叠上下文和层叠顺序之前先举个例子，创建两个box，其中红色box长200px宽400px，蓝色box长400px宽200px： <div class="box"> <div class="blue-box"></div> </div> <div class="box"> <div class="red-box"></div> </div> .box { po
多个盒子排列规则（视觉格式化模型） 多个盒子的排列 页面布局
最新发布
m0_55751104的博客
01-24 1723
1.有一个父盒子，它里面还有一个子盒子，子盒子能够存在的地方是父盒子的content区里，如果父盒子通过margin-left进行移动，子盒子也会同时进行移动。在没有设置块盒宽度的时候，块盒content区的width的默认值是auto，它会自动计算，用父盒子的content宽度值减去块盒的两边的border=块盒的content值。margin:auto， 表示0，这句话意思是，盒子上下的margin值为0，左右的margin（水平上）还是有值的。意思是：子盒子所有的百分之的值=百分比乘以父盒子的宽度。
HTML-CSS-DIV网页设计与布局第章-网页布局与设计技巧.pptx
11-17
"HTML-CSS-DIV网页设计与布局第章-网页布局与设计技巧" 本章节主要介绍了网页布局和设计技巧，涵盖了网页布局的定义、网页大小的设计、网页栏目划分、表格布局和CSS布局等方面的知识点。 网页布局的定义 网页布局...
别具光芒-CSS.属性、浏览器兼容与网页布局
07-22
资源名称：别具光芒-CSS.属性、浏览器兼容与网页布局内容简介：《别具光芒CSS属性、浏览器兼容与网页布局》结合大量范例与实际应用的实例，详细介绍了W3C发布的层叠样式表CSS2.1规范，浏览器对于CSS2.1规范解释的...
Day05-CSS布局-盒子模型
07-06
总的来说，“Day05-CSS布局-盒子模型”涵盖了网页设计中布局的基本概念，掌握了这些知识，开发者就能够更好地控制元素的外观和位置，从而创建出美观且功能完善的网页。通过实践和不断学习，开发者可以进一步掌握更...
HTML5+CSS3网页设计-第六章 盒子模型.pptx
12-21
在HTML5和CSS3网页设计中，盒子模型（Box Model）是理解网页布局和元素尺寸计算的关键概念。这个模型描述了网页元素如何占据空间，包括元素的内容区域、内边距（padding）、边框（border）以及外边距（margin）。在...
实例讲解CSS3中的box-flex弹性盒属性布局
12-30
box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-...
flex布局（弹性盒子二）
m0_72959685的博客
08-24 1389
意思是设置了属性值为space-start后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，且每个子元素盒子与父元素之间都有一定的空隙。意思是设置属性值为space-around后，三个盒子分别排列在父元素盒子的左 右 中间，且两边盒子与父元素两边有较大空隙。意思是设置了属性值为space-start后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，意思是设置属性值为 flex-end后，盒子从右向左排列在父元素盒子中，开始位置在最右最上边。
css网页检查不变形怎么办,我用css做的网页，只要进行缩放，盒子就乱了，怎么让网页因缩放而变形？...
weixin_35924719的博客
08-04 897
我用css做的网页，只要进行缩放，盒子就乱了，怎么让网页因缩放而变形？以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！我用css做的网页，只要进行缩放，盒子就乱了，怎么让网页因缩放而变形？@media screen 这个可以让你在不同的解析度下显示不同的样式举例.abc{width:1200px;margin:0 aut...
flex布局之 5个div盒子位置的排列
wzwzwz555的博客
01-22 4935
、   直接上图   前三个盒子用felx布局 最后一个盒子用定位 过去 代码如下 .box{ width: 800px; height: 600px; border: 1px solid purple; display: flex; flex-direction: row; justify-content: space; flex-wrap: wrap...
剖析Android 线性布局中的权重（layout_weight）(解答疑惑)
热门推荐
不再想当菜鸟了
04-15 2万+
首先看一下奇怪的的现象： 线性布局的情况下，有个非常奇怪的属性——android:layout_weight，该属性大部分视图控件中都有，它表示视图的重要度或者权重，看看以下两种情况下该属性的使用： （1）水平布局的情况下：（android:orientation="horizontal"） 第一种情况：设置 android: layout_width="fill_paren
CSS之布局（盒子的垂直布局）
不动声色的小蜗牛的博客
07-15 886
盒子的垂直布局： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子的垂直布局</title> <style> .outer{ background-color: #BBFFAA; /* 默认情况下父元素的高度会被内容撑开 */ } .inner{
Android布局中权重设置问题
sunshinwong的专栏
10-15 5744
现在Android中最为推荐的屏幕适应方案即为设置控件的权重weight，一般用于线性布局中。传统的 layout_weight 使用方法是将当前控件的 layout_width 和 layout_height都设置成 fill_parent, 这样就可以把控件的显示比例完全交给 layout_weight ；这样使用的话，就出现了 layout_weight 越小，显示比例越大的情况。不过对于 
线性布局的权重究竟是怎么一回事
qwli7
03-20 2880
写在前面如果你是新手，我建议你坚持看下去，因为你肯定不了解权重，而权重并没有那么简单。希望看完后对你有一定的帮助。关于说什么专业不专业，或者app流畅，其实不存在这回事情。设置成0dp，wrap-content，以及match-parent是有很多道理可循的。关于布局上节中我们讲了一些TextView的基本用法，那么这节我们就来讲一些Android中的常见布局。Android早期主要有六大布局：分别
android 布局权重问题（最近布局经常坑爹）
a7a9a68的专栏
07-17 2万+
android 布局 权重 With layout_weight you can specify a size ratio between multiple views. E.g. you have a MapView and a table which should show some additional information to the map. The map shoul

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值