CSS-常见布局技巧

最新推荐文章于 2023-12-07 16:16:05 发布
最新推荐文章于 2023-12-07 16:16:05 发布
阅读量352 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52822043/article/details/123308523
版权

目录

1. margin负值的运用

2. 文字围绕浮动元素

3. 行内块的巧妙运用

4. css三角强化

1. margin负值的运用

  1. 让每个盒子margin往左侧移动-1px 正好压住相邻盒子的边框
  2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可，如果没有定位则加相对定位（保留位置），如果有定位则加z-index 
       <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            /* 原本margin-left为0，两个盒子相邻间的边框显现出来的结果为2px */
            /* 使相邻间的线变细，压住相邻盒子的边框 */
            margin-left: -1px;
        }
        /* 相邻盒子的边框被margin-left压住了，应该提高盒子的层级，使边框显现出来 */
        /* ul li:hover {
            1.如果盒子没有定位，给盒子加相对定位
            position: relative;
            border: 1px solid green;
        } */
        ul li:hover {
            /* 2.如果盒子有定位，则加z-index提高盒子的层级 */
            z-index: 1;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

    显示的效果如图：

2. 文字围绕浮动元素

   <style>
        .box {
            width: 300px;
            height: 80px;
            background-color: pink;
            margin: 0 auto;
            padding: 5px;
        }
        .pic {
            float: left;
            width: 102px;
            height: 68px;
            margin-top: 5px;
            margin-right: 5px;
        }
        .pic img {
            width: 100%;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="images/data.png" alt="">
        </div>
        <p>杨国福要上市了，我也要吃不起了。</p>
    </div>
</body>

显示的效果如图：

3. 行内块的巧妙运用

    <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-decoration: none;
            line-height: 36px;
            color: #333;
            font-size: 14px;
        }
        .box .current,
        .box .lep  {
            background-color: #fff;
            border: none;
        }
        .box .prev,
        .box .next {
            width: 85px;
        }
        input {
            width: 45px;
            height: 36px;
            border: 1px solid #ccc;
            outline: none;
        }
        button {
            width: 45px;
            height: 36px;
            border: 1px solid #ccc;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#">1</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="lep">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

显示的效果如图：

 

4. css三角强化

 

    <style>
        .box {
            width: 0;
            height: 0;
            /* 1.把上边框的宽度放大 */
            border-top: 100px solid pink;
            border-right: 50px solid red;
            /* 2.左边框和下边框的宽度变为0 */
            border-bottom: 0px solid green;
            border-left: 0px solid blue;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

显示的效果如下：

    <style>
        .box {
            width: 0;
            height: 0;
            /* 1.把上边框的宽度放大 */
            /* border-top: 100px solid pink;
            border-right: 50px solid red; */
            /* 2.左边框和下边框的宽度变为0 */
            /* border-bottom: 0px solid green;
            border-left: 0px solid blue; */

            /* 1.只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 2.样式都是solid */
            border-style: solid;
            /* 3.上边框宽度变大，右边框小一点，下边框和左边框宽度都为0 */
            border-width: 100px 50px 0 0;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

 显示的效果如下：

 

    <style>
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .now {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            font-weight: 700;
            color: #fff;
            margin-right: 8px;
        }
        .price 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;
        }
        .prev {
            width: 70px;
            text-align: center;
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <!-- <div class="box"></div> -->
    <div class="price">
        <span class="now">
            ¥1899
            <i></i>
        </span>
        <span class="prev">¥2399</span>
    </div>
</body>

显示的效果如下：

 

qq_52822043
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS网页布局全精通
12-10
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章：CSS网页布局开发小技巧24则 稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密. 要如何以CSS作出两栏版面布局? 答案是有好几种方法,为了带领你起步,同时帮助你了解两种常见方法的差异(浮动与定位),因此先把焦点放在四种不同的方法上,在此每一种方法都能做出两栏布局,同时具备页首和页尾. 我的愿望是:你能以本章作为指引开始构建一个网站,
常见布局小技巧.7z
02-25
文字围绕浮动元素、分页按钮、三角形绘制
html让两个div紧挨着,html – CSS两个div彼此相邻
weixin_39668527的博客
06-10 1702
您可以使用flexbox来布置您的项目：#parent {display: flex;}#narrow {width: 200px;background: lightblue;/* Just so it's visible */}#wide {flex: 1;/* Grow to rest of container */background: lightgreen;/* Just so it's ...
CSS---div盒子模型、相对绝对位置、float浮动、清除浮动
weixin_51351637的博客
08-01 2157
类似下图现象，四个浮动的图不再占用最上面的那个div。
【CSS】实现div块上下左右居中对齐的5种方式
weixin_45620943的博客
10-30 5464
以上2,4,5方式，注意浏览器版本，较老版本浏览器可能不兼容。
CSS基础总结（一）
轻舟终过万重山
12-15 502
CSS基础知识：基础选择器、字体属性、文本属性、CSS引入的三种方式
Html 用flex实现多个盒子在同一行
最新发布
2301_80245529的博客
12-07 721
当输入上述代码时网页会呈现这样三个盒子。那么怎么实现让它们在同一行呢？这样这三个盒子就在同一行了。这时就要用到flex了。
CSS布局
likeorangeOvO的博客
04-27 302
文章目录浮动FLexbox网格布局定位和层叠上下文响应式设计 浮动 设置浮动后，脱离正常文档流，不会覆盖文字，文字形成环绕效果。其高度不会加到父元素上（需要将一个元素放置在主容器末尾，对其使用clear属性，将其拓展到浮动元素下方，即可实现父元素背景包含浮动元素的效果） clear：该元素某边不允许出现浮动元素 .clearfix::before .clearfix::after{ display:table; content:" "; //防止外边距折叠 } .clearfix::after{ c
CSS篇一——（1）
Regina_Cai的博客
09-27 426
CSS是层叠样式表（Cascading Style Sheets）的简称，有时也称之为CSS样式表或级联样式表。CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS可以美化HTML，使其更加漂亮，布局也更加简单。HTML主要做结构，显示元素内容CSS美化HTML，布局网页CSS最大价值：由HTML专注做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。
标记语言——CSS布局
12-12
想浏览CSS教程请点这里。...在这一章内,将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 稍后在"技巧延伸"中,将会讨论Wind
一波CSS+Div实用技巧小结
12-13
性能佳，能用CSS实现的绝对不用js实现，不管是网页布局还是动画效果，原生的CSS都是快速又具备高度兼容性的选择。清除浮动 清除浮动是个常见问题，不少人的解决办法是添加一个空的 div 应用 clear
CSS页面布局（超详解）
热门推荐
m0_52896041的博客
12-02 2万+
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
css布局教程 — 这一篇足够了
qq_60754128的博客
11-11 3749
display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
CSS常用位置样式
爱兰河少
11-30 1121
CSS margin 属性 例子 1 margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 例子 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px 例子 3 margin:10px 5px; 上外边距和下外边距是 10...
【css】最全布局总结
qq_45406325的博客
08-13 5830
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
css.布局技巧
m0_73782968的博客
02-25 63
当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。当前，新冠疫情的防疫已进入新常态
21个超实用的 CSS 技巧分享（附图示）
前端达人
03-05 5426
本文中分享的所有CSS技巧都是来自GitHub代码库“css tips tricks”的手工精选，此代码库专为开发者提供专业的CSS技巧。1、文档布局使用仅两行CSS代码，创建一个响应式的文档布局。这个布局风格类似于文档页面，可以很好地展示各种信息。.parent{ display: grid; grid-template-columns: minmax(150px, 25%) 1fr; ...
CSS中的margin属性
achenb的博客
07-18 2822
语法： margin：auto/length 参数： auto：值被设置为相对边的值 length：由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。 说明： 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。 如果只提供一个，将用于全部的四边。 如果提供两个，第一个用于上－下，第二个用于左－右。 如果提供三个，第一个用于上，第二个用于左－右，第
[CSS]常见布局技巧
emmmm.....
11-03 519
1. margin负值的运用 2. 文字围绕浮动元素 3. 行内块的巧妙运用 4. CSS三角强化
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
05-25
要让图标和文字进行并排，可以使用CSS中的display属性和float属性。 首先，将图标和文字都包裹在一个容器元素内，比如一个div元素。然后给图标和文字分别添加一个class，如下所示： ```html <div class="icon-container"> <i class="icon"></i> <span class="text">这里是文字</span> </div> ``` 接下来，在CSS中，设置.icon和.text的display属性为inline-block，这样它们就可以在同一行显示了。然后，通过设置float属性，使得.icon元素向左浮动，.text元素向右浮动。 ```css .icon { display: inline-block; float: left; } .text { display: inline-block; float: right; } ``` 这样就可以让图标和文字进行并排显示了。如果需要调整它们之间的间距，可以使用margin属性。另外，如果使用字体图标，也可以直接在CSS中使用font-size属性来控制图标的大小。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值