博学谷 - CSS笔记23 - 常见布局技巧

1.margin负值的运用

让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

demo:

        div {position: relative;float: left;border: 2px solid;height: 100px;width: 100px;}.box1 {z-index: 1;}.box2 {margin-left: -2px;border-color: brown;}

    <div class="box1"></div><div class="box2"></div>

效果:

2.文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

demo:

        div {width: 100px;}img {float: right;padding-top: 10px;height: 50px;width: 50px;}span {word-wrap: break-word;}

    <div class="box1"><img src="./t1.png" alt="#"><span>111111111111111111111111</span></div>

效果:

3.行内块巧妙运用
页码在页面中间显示:

把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

        * {margin: 0;padding: 0;}ul {height: 35px;text-align: center;}ul li {display: inline-block;list-style: none;margin: 5px;height: 35px;width: 35px;text-align: center;line-height: 35px;}.px100 {width: 100px;}.bd {border: 1px solid gray;}

    <ul><li class="first px100 bd">&lt;&lt;上一页</li><li class="bd">1</li><li>2</li><li class="bd">3</li><li class="bd">4</li><li class="bd">5</li><li><span>...</span></li><li class="next px100 bd">下一页&gt;&gt;</li></ul>

效果:

4.CSS 三角强化
原理:

利用盒子的各个边框的尺寸值大小不同来对三角形的角度进行调整

demo:

        div {width: 200px;border-top: 50px solid red;border-right: 30px solid blue;}

    <div></div>

效果:

5.文章参考链接
a. https://www.boxuegu.com/
b. https://www.cnblogs.com/lanleiming/p/5434314.html

博学谷 - CSS笔记23 - 常见布局技巧相关推荐

博学谷html css,博学谷 - CSS笔记12 - 清除浮动
1.为什么需要清除浮动由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元 ...
DIV+CSS布局概述、属性（浮动、定位等）、布局类型、常见布局技巧
文章目录布局概述网页布局页面元素定位机制布局常用属性浮动属性(float) 清除属性(clear) 定位属性(position) 溢出属性(overflow) 层叠属性(Z-index) 布 ...
【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化思 ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
[CSS]常见布局技巧
前言系列文章目录: [目录]HTML CSS JS 根据视频和PPT整理视频及对应资料: HTML CSS 老师笔记: https://gitee.com/xiaoqiang001/html_cs ...
html flex 文档流,【css笔记】- Flex 布局详细使用记录
寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到float属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版 ...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...

博学谷 - CSS笔记23 - 常见布局技巧

博学谷 - CSS笔记23 - 常见布局技巧相关推荐

最新文章

热门文章