css布局技巧-行内块元素的巧妙运用(1)

最新推荐文章于 2024-07-17 15:18:35 发布
最新推荐文章于 2024-07-17 15:18:35 发布
阅读量368 收藏 4
点赞数 5
分类专栏： 程序员 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79099606/article/details/138455271
版权
本文档系列深入讲解了CSS的基础概念，包括选择器、盒子模型、浮动、定位、元素显示与隐藏、精灵图技术以及布局技巧，如浮动元素对齐、三角形运用和负margin应用。通过实例演示，帮助读者掌握CSS在页面设计中的实际操作。
摘要由CSDN通过智能技术生成

  • 💖 作者简介：大家好，我是阿牛😜

  • 📝 个人主页：馆主阿牛🔥

  • 🎉 支持我：点赞👍+收藏⭐️+留言📝

  • 📣 系列专栏：css🍁

  • 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥

请添加图片描述

上期传送门：

👉css中的选择器

👉css盒子模型及其实战案例（上）

👉css盒子模型及其实战案例（下）

👉css网页布局之浮动及其实战案例（超详细）

👉css中的定位详解

👉css中元素的显示与隐藏

👉我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧

👉css三角的做法及其案例

👉css布局技巧-css三角巧妙运用

👉css布局技巧-文字围绕浮动元素巧妙运用

👉css布局技巧-margin负值巧妙运用

目录

    • 📋 个人简介

  • 解释

  • 案例-页数栏制作

解释

请添加图片描述

像上图中这种分页用行内块元素做起来最方便，因为行内块元素之间正好有间距，且对父盒子添加text-align:center; 里面的行内元素和行内块元素都会居中对齐。

案例-页数栏制作

Document
2301_79099606
关注
专栏目录
【CSS】高级技巧-精灵图-字体图标-三角-常用布局技巧-初始化等
YK菌的博客
12-20 380
文章目录1. 精灵图 Sprites1.1 为什么需要精灵图1.2 使用精灵图Sprites1.3 示例2.字体图标 iconfont2.1 为什么需要字体图标2.2 步骤2.2.1 下载2.2.2 引入2.2.3 追加3. CSS三角4. CSS用户界面样式4.1 更改用户的鼠标样式 cursor4.2取消表单轮廓 outline4.3防止拖拽文本域 resize5. vertical-align 属性应用解决图片底部默认空白缝隙问题6. 溢出的文字省略号显示6.1 单行文本溢出显示省略号6.2 多行文本
CSS笔记——常见布局技巧margin负值，文字围绕，行内块，强化三角
Yomuki的博客
11-28 184
一、margin负值使用 解决边框1+1=2的问题。 div { display: inline-block; float: left; width: 30px; height: 200px; border: 1px solid red; margin-left: -1px; } div:nth-child(1)
布局技巧-行内块的巧妙运用【页码组件布局】
weixin_43837268的博客
10-11 269
<!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布局技巧-行内块元素的巧妙运用
阿牛的博客
02-16 1431
css布局技巧-行内块元素的巧妙运用，简化页数栏制作。
行内块元素巧妙运用
desson
03-01 115
行内块元素的巧妙运用 相邻的行内块元素之间会有空白缝隙 行内块元素可以通过给padding设置大小 实现撑大盒子 行内块元素的大小默认是内容大小
行内块的巧妙运用（HTML、CSS）
...
08-14 158
行内块的巧妙运用（HTML、CSS） <!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">
css块元素，行内元素，行内块元素详解
最新发布
OYJP666的博客
07-17 1053
带你了解什么是css的块元素，行内元素，行内块元素
CSS---总结
m0_53586574的博客
01-05 753
CSS 内部样式表 、、、 <style> div { color: red; font-size: 12px; } </style> 、、、 通过此方式，方便控制当前整个页面中的元素样式设置 但是没实现样式与结构完全分离 行内样式表 、、、 ​ 青春不常在，抓紧谈恋爱 ​ 、、、 可以控制当前的标签设置样式 外部样式表 适合于样式比较多的情况. 分为俩步： 1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。 2.在HTML页面中
css-protips：帮助您掌握CSS技能的一系列提示
01-31
4. **CSS布局技术**：理解并运用Flexbox和Grid布局，可以轻松实现复杂的网页布局。Flexbox适用于一维布局，而Grid则适合二维布局。 5. **响应式设计**：随着移动设备的普及，响应式设计至关重要。使用媒体查询...
CSS高级技巧
一只小白657的博客
10-24 2568
CSS高级技巧一.精灵图1.1为什么需要精灵图1.2精灵图的使用二.字体图标三.CSS三角四.CSS用户界面样式五. vertical-align属性应用六.溢出的文字省略号显示七.常见布局技巧 一.精灵图 1.1为什么需要精灵图 一个网页图片过多时，服务器频繁地接收发送请求图片，会造成服务器请求压力过大，将大大降低页面的加载速度。 css精灵图技术（也叫CSS Sprites、CSS雪碧），可以有效地减少服务器接收和发送请求地次数，提高页面的加载速度 核心原理：将网页中的一些小背景图像整合到一张大图中，这
CSS中的块级元素、行内元素、行内块元素
weixin_58271420的博客
04-09 701
元素呈现“块”状，比较霸道，独占一行，所以叫块盒。可自己定义 width 和 height，可作为其他容器使用，可容纳块级元素和行内元素。没有块级元素那么自由，不能自己设置宽（width）和高（height），高度宽度又包含的内容的大小决定。display：inline-block：定义元素为行内块级元素。display : inline ：定义元素为行内元素。同时有两方特点，很自由，自己设置宽高，不独占一行。display：block ：定义元素为块级元素。
行内块元素如何进行巧妙运用呢？（57）
weixin_45147894的博客
06-19 472
想要做成下面这个效果该如何进行做呢？咱们是直接给浮动，让所有的li再设置边距和居中呢？ 其实最巧妙的做法是利用行内块元素来做是更好的呀！ 究竟怎么做呢？使其转换成行内块元素，这样就可以加入宽高了呀！ 初步效果出来了！可是呢，需要许多完善的地方呀！ 改变颜色和使其文本居中，加入行高呀 ，再去掉下划线就可以了 怎样使其整个盒子居中呢？ 第一个和最后一个设置成上一页和下一页呀！ 效果如下图：为什么成这个样子呀？ 原来是li的宽度小于字体的宽度了！那我们可...
CSS行内块元素
weixin_53144068的博客
01-13 2154
CSS行内块元素(内联元素) 一、典型代表 input img 二、特点： 在一行上显示 可以设置宽高 <style type="text/css"> img{ width: 300px; /* 顶部对齐 */ vertical-align: top; } input{ width: 300px; height: 200px; background-color: blue; } </style> </head> <body
CSS之 块、行内、行内块元素
weixin_45707229的博客
07-02 1057
CSS之块级元素，行内元素，行内块元素
CSS盒子模型(border、padding、margin设置)、行内块或行内元素水平居中、去除li小圆点、圆角、盒子阴影、文字阴影、透明度
Bulut0907
01-27 5942
目录1. 盒子模型的组成1. border边框1.1 border-collapse: collapse2. padding 1. 盒子模型的组成 1. border边框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> div {
CSS之布局（行内元素的盒模型）
不动声色的小蜗牛的博客
07-15 291
行内元素的盒模型： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行内元素的盒模型</title> <style> .s1{ background-color: yellow; /* 行内元素的盒模型： -行内元素不支持设置宽度和高度 -行内元素可以设置padding，但是
html常见的块元素与内联（行内）元素用法说明
Kimser
06-18 302
html常见的块元素与内联（行内）元素用法说明 html平时常见的块元素有：div, p, h1, h2, h3等，内联元素有：span, a, img等。 块元素的属性：无论内容是什么，都会独占一整行。主要用于页面布局。 内联元素的属性：只占自身大小的元素，不会占用一行。主要用于选中文本设置样式。 div块元素仅仅只用于进行页面布局，它自身不带任何默认样式。 span内联元素可以用来选中文本设置文本的样式，其自身不会带默认样式。 一般情况下，只使用块元素包含内联元素，而不会使用内联元素去包含块
CSS样式--------行内，行内块，块元素个人总结
wjs_1997的博客
06-04 337
行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。inline-block 元素也可以设置vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。注意：HTML 中的换行符、空格符、制.
css 行内元素基本视觉布局----- 个人理解
正在崛起的博客
10-16 279
行框的高是由该行内 多个行内框决定的，而该行内的 行内框又根据不同基线对齐（默认是按基线对齐） 故造成该行的行框的高度是很难人工算出来的； 由此得出的一个大概的结论是： 行框内的行内框 高度（由line-height和font-size算出）越大，一般行框的高度越大。
CSS块级与行内元素转换与居中技巧详解
理解行元素和块元素的行为以及如何灵活运用`display`属性对于网页布局和设计至关重要。居中对齐通常涉及定位技术，如使用`margin`、`flexbox`、`grid`或`position: absolute`配合`transform: translate`来实现不同...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值