前端（四）之精灵图与盒模型布局

xiangchaobin 发布于2019-04-23 13:07 / 2010人阅读

摘要：前端之常用标签的使用边界圆角精灵图以及盒模型的布局前端之常用标签的使用边界圆角精灵图以及盒模型的布局前言前言上篇博客介绍了组合选择器，包括四种，分别是群组选择器后代子代选择器兄弟相邻选择器及交集选择器标签的四大伪类选择器，，其中和也可以用于

前端之常用标签的使用、边界圆角、精灵图以及盒模型的布局

前言

上篇博客介绍了组合选择器，包括四种，分别是群组选择器、后代（子代）选择器、兄弟（相邻选择器）及交集选择器；a 标签的四大伪类选择器，a:link、a:hover、a:active、a:visited，其中 hover 和 active 也可以用于其他标签，索引选择器包括三种


div:nth-child(1) 

div:nth-of-type(1)

.div:not([abc])

最后介绍了最最重要的盒模型，盒模型由四部分组成由内到外分别是：content+padding+border+margin，其中 content+padding+border 参与盒子显示，margin 参与盒子布局。

常用标签的使用

边界圆角




    
    边界圆角

背景样式




    
    背景样式

精灵图




    
    精灵图

盒模型布局




    
    盒模型布局细节

云服务器 GPU云服务器建站精灵按键精灵游戏精灵网络还原精灵

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1458.html

前端（三）之选择器高级与盒模型

摘要：内容不会被修剪，会呈现在元素框之外。内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。值描述内联块级内联块前端之 CSS 选择器高级与盒模型前言先回顾昨日的内容，昨天讲了 w3c 的整个架构，由结构层>布局层>内容层三部分组成，了解了 CSS 的三种引入方式，行间式最简单直接；内联式解耦合，可读性强；外联式适合团队高效开发，耦合性低，复用性强，了解了三种选择器，并且 id 选择器>...

番茄西红柿 2019-04-23 13:08 评论0 收藏0
盒模型的一些碎碎念

摘要：盒模型的简介本文简单的总结了一些基本概念，知识点以及细节问题作为前端人员，盒模型是最基础的知识点，在排版与布局时不可避免与盒模型打交道。 1. 盒模型的简介本文简单的总结了一些基本概念，知识点以及细节问题作为前端人员，盒模型是最基础的知识点，在排版与布局时不可避免与盒模型打交道。在我们编写HTML时，网页上的内容几乎都是被包在一个个元素（当然也可以叫做标签）中的，最常见的有div...

王伟廷 2019-08-29 16:27 评论0 收藏0
盒模型一二三（一）：盒世界，知几何

摘要：比如表示上下左右都是像素块元素居中的样式，表示上下表示左右而表示上，左右，下。浏览器对块元素的默认样式问题如下块元素的盒模型样式复合属性写法如果我们想给添加样式，可以这样写为了精简代码，也可以采用如下的复合属性写法学习 HTML 和 CSS 将近一个月，我以为：层级（嵌套）关系和盒模型（Box Model）是理解和学习这两门语言的基石，正如图层概念是 Photoshop 的基础。因此...

tuantuan 2019-08-28 18:15 评论0 收藏0
CSS2-盒模型、背景图片

摘要：合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。雪碧图的使用背景图与元素的原点重合。白色框是元素，绿色框是背景图片。盒模型属性 margin外边距（top,right,bottom,left）border边框(top,right,bottom,left)padding内边距(top,right,bottom,left)content内容区(width,height)ma...

yuanzhanghu 2019-08-29 15:33 评论0 收藏0
前端面试题（五）（安全、性能优化）

摘要：可能造成危害利用已通过认证的用户权限更新设定信息等利用已通过认证的用户权限购买商品利用已通过的用户权限在留言板上发表言论。二说说你说了解的前端性能优化方面减少请求合并文件精灵减少查询查询完成之前浏览器不能从这个主机下载任何任何文件。一、说说你所知道的web安全及防护措施常用攻击手段：SQL注入、XSS(Cross Site Script)，跨站脚本攻击、CSRF(Cross Sit...

tuomao 2019-08-22 18:01 评论0 收藏0