CSS小结】的更多相关文章

在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi…
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia…
一.1. css必须写在<head></head>里面的<style></style>里面 2. css 由选择器 + 规则组成, 规则由属性和值组成 ,格式示例:div{color:red;} 3. 常用的选择器有:标签选择器(类型选择器).class选择器(类选择器).id选择器.后代选择器. 组合选择器和并列选择器等等 4. class选择器与id选择器的区别是,class可以样式重用,而id不行,因为id就像是人的身份证,是唯一的 5.层居中的要决:…
这两天做前台页面发现个人在CSS前端方法很多基础知识都忘了,晚上又搜索学习了下,把相关内容摘录总结. CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declaration1; declaration2; ... declarationN } 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样式属性(style attribute).每个属性有一个值.属性和值被冒号分开. selector…
1.ASP.NET 引用CSS 1.Site.master里面设置webopt <webopt:bundlereferencerunat="server"path="~/Content/css"/> 2.在Bundle.config里面绑定具体CSS <?xml version="1.0" encoding="utf-8" ?> <bundles version="1.0"&g…
本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前网页上使用图标主要采用精灵图(背景位置+背景缩放)来实现,但是这样使用起来有许多不便之处,一方面缩放处理起来比较麻烦,一方面如果要改动一些图标就需要去找到设计人员重新设计,然后重新添加,这个过程非常不友好. 图标字体可以非常便捷的去解决以上问题,使用起来也非常简单.因为他是字体,所以可以当成字体来引…
1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的强大之处 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=…
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极大地灵活性,所谓弹性布局即可根据大小判定自动伸缩. flex相关的各个属性如下: 1.display:flex:在父盒子定义flex,子盒子才能使用flex属性 2.flex:none |flex-grow flex-shrink  flex-basis  设置子盒子的缩放比例,可以一起指定也可以单…
定位也是Css中一个非常强大的属性.定位主要是用来移动盒子,将其移动到我们想要的位置. 定位分为两部分 1.边偏移 left | right |top |bottom:偏移大小:(边偏移一般制定上就不指定下,指定左就不指定右) 2.定位模式 position :static| relative |absolute | fixed (1)position :static默认值,使用static时 边偏移不起效果.常用于取消定位. (2)position :relative  相对定位,相对于其原文…
浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-…