css
关注
分享
扫一扫
锅王
会写代码的好大厨
展开
-
css中heght:100%不起作用的原由
在网页设计中，table用height:100%是可以整屏的，但需要在网页头部增加: 后就和没有用height:100%一样了，后来发现要给html,body都增加height:100%的属性，这是高度自适应问题的关键所在。 代码如下: html,body{ margin:0px; height:100%; } 一个对象高度是否可以使用百分比显示，取决于对象转载 2016-04-08 10:46:11 · 593 阅读 · 0 评论 -
浏览器的默认样式
文／九彩拼盘（简书作者）原文链接：http://www.jianshu.com/p/f7018b32ca4a浏览器都拥有一套自己的默认样式。浏览器之所以有默认样式表，是为了没有样式表的页面也能凑活着看。 不同浏览器；以及版本不同的浏览器的默认样式一般都是不同的。重置样式表为了保证页面在不同浏览器中显示的尽可能的一致，我们会重置不同浏览器默认的样式，称为重置样式表。有很多别人整理的不错的重置样式表，转载 2016-11-23 11:01:19 · 433 阅读 · 0 评论 -
CSS权重中的越级现象
CSS（层叠样式表）通过多重层叠样式间各自权重的比较计算，来决定那一层样式应该最终发挥作用。这也是css中“层叠”意思的具体体现。 权重的一般规则，一般是 ！importent > 内联样式 > id > class > 元素选择器 > * 。 但真实的应用中往往没这么简单，经常是 各级选择器搭配嵌套使用，如 div.nav或者 .nav .bar,这时就涉及到权重的具体计算。 CSS中样式原创 2016-11-22 15:04:31 · 1341 阅读 · 0 评论 -
CSS中的百分比(%)到底是谁的百分比？
在定义CSS样式的时候经常会用的 “%”这个长度单位，但是这个百分比到底是相对于谁的百分比呢？1、有人说是相对于父元素的百分比，但是这么说有时候却会出问题原创 2016-09-22 15:36:17 · 20704 阅读 · 4 评论 -
利用 text-align:justify 实现两端对齐布局
text-align：justify本意是让整行的文字实现左右对齐，不留空白。它用来控制inline及inline-block元素的左右对齐方式。在布局时，只需要将列表项元素diplay转换为inline-block，然后外层包裹元素设置text-align：justify就能实现列表项元素的自动左右对齐CSS部分： .con{ width: 5原创 2016-09-08 18:29:20 · 1443 阅读 · 0 评论 -
浏览器兼容问题
1、ie7及以下不支持inline-block在IE（以下IE8除外）下，如果对内联元素，比如a或span元素，使用inline-block属性是有效的，似乎IE是支持的，其实是触发了IE的layout，从而拥有了inline-block属性的表症。这样我们就有了一种在IE下实现display:inline-block效果的两种方法：1、先用display:inline-block属性触发块元素，原创 2016-09-08 16:25:39 · 258 阅读 · 0 评论 -
实现垂直居中 和 vertical-align
关于vertical：1、定义和用法vertical-align 属性设置该元素相对于所在行基线的垂直对齐方式。只对行内元素（a，span，img等）的基线相对于该元素所在行的基线的垂直对齐（允许负值）。2、实例列举①img标签的vertical-align: text-topimg标签的vertical-align: bot原创 2016-05-24 16:16:42 · 1277 阅读 · 0 评论 -
对于line-height的一些理解
凡是有inline-block元素的地方就会有line-height的存在，就算你不设它的值，line-height依然通过继承来的fontsize等属性获得与之相匹配的line-height，这也是许多inline-block元素使用过程中出现各种怪现象的原因典型例子：一. img标签的底部留白<!DOCTYPE html><html> <head> <style>原创 2016-09-09 11:53:10 · 3560 阅读 · 0 评论 -
宽度自适应布局
自适应布局是一种很常见的布局方式，现将常见的几种实现方式列下：1：利用float左右两div分别左右浮动，不再占用文档流，块元素div.main自动占据整行，然后给main添加左右margin分别为左右两块元素的宽，代码如下：.con{width: 500px;height: 100px;}div{height: 100px;}.le原创 2016-06-06 17:13:43 · 644 阅读 · 0 评论 -
溢出文字处理CSS属性——text-overflow、word-break、word-wrap和white-space
一、首先依次介绍这几个文字处理的CSS属性1、word-break： word-break 属性规定自动换行的处理方法。当行尾放不下一个单词时，决定单词内部该怎么摆放。 break-all: 强行上，挤不下的话剩下的就换下一行显示。keep-all: 放不下我了，那我就另起一行展示，再放不下，我也不退缩。类似于word-wrap：normal2、wo原创 2016-06-03 16:58:35 · 4046 阅读 · 0 评论 -
css expression是什么鬼
概述 css expression(css表达式)又称Dynamic properties(动态属性)是早期微软DHTML的产物，以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作用，从IE5开始得到支持，后因标准、性能、安全性等问题，微软从IE8 beta2标准模式开始，取消对css expression的支持。 使用 微软提供了4个css转载 2016-06-01 18:27:12 · 1548 阅读 · 0 评论 -
图片和文字同行显示时的垂直对齐方式
最近发现当img和文字同行显示的时候，图片底部总是留有空隙。经查证原来是img的vertical-align默认值为baseline搞的鬼。1、vartical-align：baseline:2、vartical-align：text-bottom:原创 2016-05-18 11:04:45 · 2240 阅读 · 0 评论 -
元素竖向的百分比设定是相对于容器的高度吗?
这是之前遇到过的一个面试题，经过一番验证，发现无论回答“是”or“否”不不太准确1、竖向百分比 之 height .con{ width: 200px; height: 100px; background: gray; margin-left: 200px; } p{ background: cornflowerblu原创 2016-05-26 11:37:43 · 7864 阅读 · 0 评论 -
object-position/object-fit
object-position/object-fit 这两个属性规定了 替换元素的填充方式和的对齐方式。包括img、video等 详情转载 2018-04-08 14:23:09 · 323 阅读 · 0 评论