CSS
文章平均质量分 53
Elna_99
这个作者很懒,什么都没留下…
展开
-
outline和border的区别
outline和border显示效果类似。两者的区别是,1、outline不占用网页布局空间。他是一种动态样式,只有在元素获得焦点或者被激活的时候呈现效果,突出元素的作用。border是盒模型的一部分。2、outline创建的轮廓线四边都必须是一样的,而border可以不同。outline的外轮廓线必须闭合,不可以只设置一边。3、outline创建的轮廓线可以向内扩展(将outline原创 2017-03-31 20:32:10 · 2926 阅读 · 0 评论 -
水平自适应问题
方法一、采用百分比.left{ width: 20%; float: left;}.center{ float: left; width: 50%;}.right{ float:left; width: 30%;}方法二、采用绝对定位采用绝对定位将元素固定在浏览器窗口的某个位置。原创 2017-03-30 16:43:43 · 337 阅读 · 0 评论 -
垂直自适应问题
一、独立元素的自适应1.设置高度为auto设置高度为auto时,元素的高度随内容多少自动变化。2、使用min-height和max-height使用min-height时内容达不到min-height的高度时,显示min-height的高度;内容超过min-height时,随内容而自适应。使用max-height自然是和min-height类似的道理。二、两列自适应原创 2017-03-29 16:15:06 · 458 阅读 · 0 评论 -
两种盒模型
原来存在两种盒模型,W3C标准盒模型和IE盒模型。两者盒模型下计算元素的宽高不一致,为了实现统一,采取的方法是避免触发IE盒模型,使用声明就可以避免。下面我们来看看两者的区别。W3C标准盒模型 width=(margin-left)+(margin-right)+(padding-left)+(padding-right)+(border-left)+border-right+conten原创 2017-03-21 20:35:10 · 552 阅读 · 1 评论 -
background-origin属性使用示例
background-origin用来决定background-position的参考原点,即背景图片定位的起点。取值有content-box,padding-box,padding-box三种。content-box:背景图像相对于内容框来定位:.padding-box{ width: 314px; height: 500px; border: 1p原创 2017-03-21 19:38:30 · 1648 阅读 · 0 评论 -
font-size:0; 使用技巧
首先说明一个原理,HTML之间的换行符,制表符,空格符等产生了空白符,这些到底都是字符,都由font-size来掌控。因此当图片与边框之间有间隙的时候,去除之间的间隙就用到font-size:0;起到同样功能的还有line-hegiht:0.原创 2017-03-11 22:40:10 · 508 阅读 · 0 评论 -
制作3D搜索框
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">原创 2017-03-19 23:47:52 · 442 阅读 · 0 评论 -
border-radius制作圆形,半圆形,扇形,椭圆
使用border-radius 制作圆形有两点技巧:(1)元素的宽高形同(2)border-radius值为宽或高的一半,或者直接设置为50%;制作半圆大同小异,只是圆角方位配合的问题。下面仅给出示例:html代码:DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta n原创 2017-03-19 10:41:39 · 3351 阅读 · 0 评论 -
关于display:block的一点思考
关于这个属性的思考基于一次写手风琴代码的经历,说到这个display:block必须要追溯到什么是块级元素,行内元素,以及各自的特点。块级元素:每个元素默认独占一行,一行内有一个块级元素后如果不通过添加浮动,是只能有一个块级元素的。block(块)元素的特点:(1)只能在新的一行上开始。(2)高度,行高,以及margin, padding都可控制。(3)宽度缺省的时候是100%原创 2017-03-04 21:08:21 · 922 阅读 · 0 评论 -
css基础知识盘点
1、css书写顺序:显示属性:display,list-style,position,float,clear自身属性:width,height,margin,padding,border,background文本属性:color,font,text-decorator,text-align,vertical-align,white-space,other-text,content;原创 2017-03-17 20:36:02 · 462 阅读 · 0 评论