文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css笔记

（宽高、边框样式、边距等）以及版面的布局等外观显示样式。...2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。 3、如果一个盒子则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小。...（清除右侧浮动的影响） both 同时清除左右两侧浮动的影响 额外标签法 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 ，或则其他标签...此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。 这就是字体图标（iconfont). 字体图标优点 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.....你好，我也好） ​ 转换ico图标 我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。

7.6K50

前端学习笔记之CSS属性设置 CSS属性设置

非衬线字体 中文：宋体，微软雅黑，黑体 注意： 1、设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值。...，如此，既节省了流量提升了速度，又不影响用户访问例如很多网站的导航条都是用这种手法制作的 background-attachment 设置标签的背景图片在标签中固定或随着页面滚动而滚动 background-attachment...div一般用于排版，而span一般用于局部文字的样式 1、站在HTML的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行 2、站在CSS的角度：div是一个容器级标签...，而span是一个文本级标签 <!...我 7、清除默认边距 #1、为什么要清空默认边距（外边距和内边距） 浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等 编写代码之前的第一件事情就是清空默认的边距

5.8K30
您找到你想要的搜索结果了吗？
是的
没有找到

CSS3入门

，但是会影响页面响应速度，不建议使用 样式的两个特性 层叠性：多个选择器设置的样式可以叠加在同一标签上 当样式出现冲突时，优先考虑权重;权重相同的情况下，采用就近原则 继承性：子标签继承父标签的某些样式...display:none --> 隐藏元素 字体图标和背景颜色 字体图标 进入阿里图标库：https://www.iconfont.cn/ span标签引入字体图标 背景颜色 background-color...当设置为border-box时，width和height就是最终宽高，不再受padding影响 外边距塌陷 同—列上下两个元素相邻，并且上有margin-bottom，下有margin-top时，会发生塌陷...scroll : 清除浮动，左侧和下方加滚动条 定位 将盒子定在页面的某一个位置（漂浮) 定位由两部分组成： 定位模式：相对定位、绝对定位、固定定位、静态定位 边偏移：top、left、fight、bottom...静态定位(static) 就是无定位，无法使用边便宜来调整盒子的位置。

1.6K10

【CSS】253- 从原型图到成品：步步深入 CSS 布局

听起来很棒吧？那就开始吧。 布局小例子 在本文中，我们要比照 Twitter 的推文组件自己仿写一个： ? 不论是一个像这样的草图，还是一个细节精美的原型图，“有章可循” 总是个好主意。...然后要注意，为什么 @handle、用户名和时间都在同一行？原因是它们都在 span 标签中，而 span 是行内元素。...至少是在英文界面的布局中，文档流的方向是从左到右、从上到下的，因此，每个元素都 “依赖” 其左侧和上方的元素。 在 CSS 中，每个元素的定位都受到其左侧和上方的元素的影响。... More Actions Font Awesome 是一款图标字体...正因为它是字体，那些可以用于文字的 CSS 属性（例如 color 和 font-size）都适用于图标字体。

4.4K51

CSS基础

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。...;} 伪类选择符 更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色： a:hover...注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。 最后一个影响特殊性的声明:!...浮动的设置方法： float:left; float:right; 让标准流中的元素不受到浮动的影响 clear:both; none:默认值。...元素都可以看成是一个盒子，这些盒子很多都有一个自己默认的内边距或者外 边距，并且每个浏览器默认的距离还有可能不太一样，这样对于我们页面布局或者具体 的细节的定位产生影响，那么我们应该怎么办？

1.7K50

CSS入门？一篇就够了！

标签选择器 可以把某一类标签全部选择出来 div span 类选择器 类选择器使用“.”...常见的行内元素有、、、、、、 、、、等，其中标签最典型的行内元素。...2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。 3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。...） both 同时清除左右两侧浮动的影响 额外标签法 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 ，或则其他标签br等亦可...为什么要用定位？ 那么定位，最长运用的场景再那里呢？ 来看几幅图片，你一定会有感悟！ 如图， 小黄色块可以再图片上移动： 元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。

4.9K20

【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

; 图片标签的样式为 : nav a img { /* 图片宽度为 40 像素 高度自适应 */ width: 40px; /* 上下 10 像素外边距 */ margin...: 10px 0; } 5、设置文本 在链接中的文本 , 放在 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ; 将其设置为 block 块级元素 , 就可以放置在图片下方 ;...文本 span 样式为 : nav a span { /* 导航栏中的文本 设置为 块级元素 */ display: block; } 二、完整代码实例 ---- 1、HTML 标签结构...8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */ width:...: #ccc; } .sou { /* 二倍精灵图 */ /* 设置 精灵图中的放大镜图标 */ /* 该图标是绝对定位 */ position: absolute;

3.2K40

前端(二)-CSS

-- 外部样式，引入使用link标签，写在head标签中,是单标签，但是rel属性和href属性是必须的，且rel="stylesheet"是固定的引入外部样式才可以生效,href属性指定外部文件的资源路径...→字体粗细→字体大小→字体类型） 字体的粗细 值 说明 normal 默认值，定义标准的字体 bold 粗体字体 bolder 更粗体字体 lighter 更细体字体 100,200,300,400,500,600,700,800,900...1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置 ； 2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响 ； 3.设置相对定位的盒子原来的位置会被保留下来...，而是浏览器窗口； 使用场景：在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等； 6.4 z-index属性 调整元素定位时重叠层的上下位置 ； 1.z-index属性值：整数，默认值为...-- 在进行伪类触发后还可以对指定标签操作；点击li的时候还可以改变span的背景色； 1 雅诗兰黛即时修护眼部精华霜15ml --> ul li:hover

1.8K20

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ; 搜索栏下方的 Banner 轮播图 , 如果以 标准流 显示 , 会被 搜索栏 覆盖 , 此处为 Banner 轮播图设置一个上外边距..., 避免显示在搜索栏下方 ; .banner { /* 上面的搜索栏是固定定位的 如果使用默认设置 该 Banner 栏会被搜索栏盖住 因此这里设置一个 44 像素的上外边距 *...12 像素 */ font-size: 12px; } 4、二倍精灵图 下图中的 5 个图标 , 都定义在一个精灵图中 , 这里需要使用精灵图作为背景 ; 精灵图如下 , 尺寸为 64...x 320 像素 , 每个图标的尺寸为 64 x 64 像素 , 这又是一个二倍精灵图 ; 二倍精灵图设置步骤 : 缩小精灵图 : 在 Firework 中 , 将精灵图缩小一半 ; 测量坐标 : 在缩小一半的精灵图中测量坐标...上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中 */ height: 26px;

40020

「学习笔记」CSS基础

作用 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。...p { font-family:"微软雅黑";} 指定多个字体，如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体，如果都没有，以电脑默认字体为准。...margin 背景图片我们一般用于小图标背景或者超大背景图片、背景图片，移动位置只能通过 background-position 清除元素的默认内外边距 行内元素为了照顾兼容性,尽量只设置左右内外边距...不允许右侧有浮动元素（清除右侧浮动的影响） both 同时清除左右两侧浮动的影响 实际工作中,几乎只用clear: both 1).额外标签法(隔墙法) 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如...为什么需要精灵技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

3.2K30

【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

像素 , 该大盒子 , 可以分为如下三个小盒子 , 小盒子中的元素都是垂直居中的 , 可以在大盒子中设置一个行高 , 小盒子自动继承 ; font-xxx , line-xxx , text-xxx..., 竖线中间的文字都是链接标签 , 每个链接标签左右两侧各有 30 像素的间隔 , 这里使用外边距实现 ; 文本的高度和行高继承父元素的样式 , 都为 60 , 会自动垂直居中 , 文本大小为...-- 顶部的标题 --> 我的课程表 <!...*/ margin-right: 30px; /* 字体大小和颜色 */ font-size: 14px; color: #00a4ff; } 完整代码 : /* 清除标签默认的内外边距 */...; /* 用户头像 30 像素 容器高 42 上下各 6 像素边距 图像垂直居中 */ padding: 6px 0; } /* 用户栏 名字样式 */ .user .user-name {

5.1K30

【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

一、水平排列的图片链接样式及核心要点 ---- 1、实现效果 实现如下样式 , 水平排列的图片链接 , 第一个图片占宽度的 50% , 第二第三个 链接 占总宽度的 25% ; 2、HTML 结构...使用 标签作为父盒子 , 其中容纳三个 链接 标签 , 每个链接标签中包含一个 标签 ; <!...; } 使用结构伪类选择器 , 分别对 第一个 标签和第二三个 标签进行设置 , 前者占 50% 宽度 , 后者占 25% 宽度 ; .news a:nth-child(1) {...8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */ width:...: #ccc; } .sou { /* 二倍精灵图 */ /* 设置 精灵图中的放大镜图标 */ /* 该图标是绝对定位 */ position: absolute;

2.3K40

B端产品设计规范

开篇说： 上一篇，我写过一篇综合类的设计规范和适配。 这一次我想重点写一下：网页PC端产品设计规范和组的设计拆解，对项目的设计效率提升，有一定价值和意义。...所有字体样式颜色组合需要尽量通过 3:1 的 WCAG AA 标准。 图标的思考：如下图所示。 图标现在是制作完成后，上传到阿里巴巴的字体图标库中。前端调用起来更方便，调整图标的大小和颜色就好。...边距  为避免页面元素紧贴边沿的情况发生，WEB 页面和其中的表格，应设定边距，最小边距值为 “3px”。如下图所示。...表格内的内容在左对齐时，尽量与左边表格边距保持至少 10px 的间距。 表格在后台系统设计中大约占40%左右的比重。 表格的设计规范的设计思考点如下： 操作列按钮：每个按钮字数不超过6个字。...所以一个好的设计师，往往都有自己特有的优势标签，在一个领域内树立的优势项，来帮助团队达到合作共赢的设计效果。

4.1K44

Web-CSS

，通过选择器影响对应的标签。...浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。...外边距重叠 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。...取值： flex-start：所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。 flex-end：所有行从垂直轴末尾开始填充。...容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。 stretch：拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

8.5K20

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )

*/ .subnav li a:hover { color: #00b4ff; } /* 链接内部的 span 标签 , 右浮动 */ .subnav span { float: right;...} 完整代码 : /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } /* 清除列表默认样式 ( 主要是前面的点 ) */ li {.../* 右外边距 20 像素 */ margin-right: 20px; /* 行高 = 内容高度 垂直居中 */ line-height: 40px; /* 字体大小 */ font-size...; /* 用户头像 30 像素 容器高 42 上下各 6 像素边距 图像垂直居中 */ padding: 6px 0; } /* 用户栏 名字样式 */ .user .user-name {...*/ .subnav li a:hover { color: #00b4ff; } /* 链接内部的 span 标签 , 右浮动 */ .subnav span { float: right;

3.2K50

CSS概要

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的 文字有着统一的字体、字号或者颜色等。...CSS语法 选择符 { 属性:值} 选择符:又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段(p)的文字将变 成蓝色，而其他的元素(如ol)不会受到影响。...a:hover{color:red;} 分组选择符 - html中多个标签元素设置同一个样式时，可以使用分组选择符 h1,span{color:red;} CSS 排版  设置字体: font-family...元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。...; 元素的高度、宽度及顶部和底部边距不可设置; 元素的宽度就是它包含的文字或图片的宽度，不可改变。

1.4K50

css布局 - 垂直居中布局的一百种实现方式（更新中...）

帮多行文本找一个继父来领养他，让继父弥补父元素给他带来的伤害（行高和水平居中对齐的样式修改） 2. margin负边距简单处理一下底部小“裂痕” 三、父元素高度 不 固定时，单行文本 | 图片的绝对垂直居中...但究竟是因为什么呢？我往图片后边写了一个x辅助理解，这下明白了吧！图片默认是文本基线对其的。文本垂直居中，就到垂直正中间那里。但是图片底部为了与文字底部对其，所以留给顶部的空间就不多了。...不过具体情况具体分析，换个页面，字体大小不一样，对行高的影响也不一样，自然偏差也不一定是4像素，新的负数值再重新计算即可。 总结关键点： 1、父子齐心，line-height断难题。...2、鼎鼎大名，margin负边距。 可行性分析：这种再根据当前页或当前元素字体大小调整margin负边距大小值的做法实属有点不妥。 不过还好最近跟大神学了一招“万能胶”。这里暂且按下不表。...（一）灵魂辅助的vertical-align:middle值 具体见上边第三条的例子，用一个span空标签放到需要垂直居中元素的后边或者前边，作为辅助兄弟元素。

3.4K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券