css相关
Kevin&Swift
每天进步一点点.记录生活的一部分
展开
-
css的border margin padding属性
前言盒子模型,英文即box model。无论是div、span、还是a都是盒子。但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。css的border属性可以用来定义样式border-style属性用来定义边框的样式为边框指定宽度(border-width)有两种方法:可以指定长度值,比如 2px 或 0.1...原创 2018-12-07 18:31:38 · 585 阅读 · 0 评论 -
CSS Display(显示) 与 Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。...原创 2018-12-07 18:46:15 · 537 阅读 · 0 评论 -
css相关基础知识
css指的是层叠样式表 样式的定义html如何进行显示.样式通常存储在样式表中,解决内容与表现分离的问题.css语法由选择器 属性和属性值三部分构成.p{color:red;text-align:center;}css中的注释位/*ccc*/ html中的注释位<!--ccc-->css中有id选择器和class选择器#para1 { text...原创 2018-12-05 15:49:24 · 117 阅读 · 0 评论 -
css中flex中布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。flex布局,可以简便,完整,响应式的实现各种页面的布局。所有浏览器都支持。flex是弹性布局的缩写,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。.box{ display: flex;...原创 2018-12-13 21:23:34 · 160 阅读 · 0 评论 -
css中字体单位与超链接样式
设置字体大小位像素 可以完全定死 h1 {font-size:40px;}用em来设置字体的大小 来代替像素px1em和当前字体大小相等,在浏览器中默认的文字大小是16px1em = 16px 可以通过如下公式将像素转为empx / 16 = em h1 {font-size:2.5em;} /* 40px/16=2.5em */使用em 可以在所有浏览器中动态调整大小....原创 2018-12-06 20:46:32 · 274 阅读 · 0 评论 -
css盒子模型
所有html元素可以看做盒子,css盒模型本质上是一个盒子,包括边距,边框,填充和实际内容.margin border padding contentmargin 外边距 border 围绕在内边距和内容外的边框 padding 清除内容周围的区域,内边距是透明的content 盒子的内容 Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) ...原创 2018-12-06 20:57:26 · 99 阅读 · 0 评论 -
css position的定位与overflow.浮动
static定位,即没有定位,元素正常的出现在流中,不会受到top,left,right,bottom的影响。fixed定位:相对于浏览器窗口是固定位置,与文档流无关,因此不占据空间。即使窗口滚动也不会移动。relative定位:相对定位元素的定位是相对其正常的位置。absolute定位:绝对定位的元素的位置是相对于最近的已定位的父元素。若没有已定位的父元素,则是相对于html...原创 2018-12-09 22:02:15 · 812 阅读 · 0 评论 -
css布局 对齐
元素居中对齐:可以使用margin:auto;外边距设置 注意内边距padding设置无效。注意这种必须设置width属性 设置为60%文本居中对齐 可以使用text-align:center 图片居中对齐,使用margin:auto,并且是块元素,所以设置display为blockimg { display: block; margin: auto; width: 40%; }...原创 2018-12-09 22:22:43 · 184 阅读 · 0 评论 -
media 媒体查询与响应式编程
@media规则允许在相同样式上为表现不同的媒体设置不同的样式@media screen{ p.test {font-family:verdana,sans-serif;font-size:14px;}}@media print{ p.test {font-family:times,serif;font-size:10px;}}如果浏览器窗口相遇500px,背景将...原创 2018-12-11 20:33:08 · 156 阅读 · 0 评论