![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html和css
html和css基础
无悟饭空
一个立志要从事十年的迷路码农
展开
-
ie6的最小高度19px的解决方案
在ie6下默认最小高度为19px;当给当前元素的父元素的fontsize设置为0时,当前元素可设置的最小高度为2px;原创 2020-03-14 14:31:33 · 167 阅读 · 0 评论 -
两列布局
一列定宽,另一列自适应。思路:左边容器float:left;设置width;右边容器开启BFC; <body> <div id="left">left</div> <div id="right">right</div> </body>*{ margin: 0; padding: 0;}div{ ...原创 2020-01-07 17:34:07 · 264 阅读 · 0 评论 -
BFC详解
——在解释 BFC是什么之前,需要先介绍Box、Formattng Context的概念Formatting Context一个决定如何渲染文档的容器;它是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的Formatting Context有 :Block Formatting Co...原创 2020-01-07 17:22:15 · 264 阅读 · 0 评论 -
禁止系统默认滚动条
overflow:scroll在浏览器中的机制单独给html设置时,窗口出现滚动条。html{overflow:scroll}单独给body设置时,窗口出现滚动条。body{overflow:scroll}给html和body都设置时,body出现滚动条,窗口也出现滚动条。html{overflow:scroll}body{overflow:scroll}原因...原创 2020-01-07 14:09:33 · 470 阅读 · 1 评论 -
三列布局之双飞翼布局
简介:圣杯布局中有用定位来固定左右两栏的位置,淘宝某工程师觉得不太恰当,在圣杯布局的基础上稍作修改。思路:在middle中嵌套div,作为真正的middle内容区。并在里面的div用padding撑开保留左右两栏的位置,让自己的内容完全显现出来。 <body> <div id="header"> <h4>header</h4> &l...原创 2020-01-07 13:44:53 · 83 阅读 · 0 评论 -
等高布局就是伪等高布局
实现原理:1、用padding-bottom把两个元素撑开;2、用margin-bottom把两个元素的下边界收回原来的位置。3、父元素用overflow:hidden;把超出部分隐藏。<body> <div id="wrap" class="clearfix"> <div class="left"> left </div>...原创 2020-01-07 13:24:10 · 142 阅读 · 0 评论 -
三列布局和圣杯布局
——1、两边固定,当中自适应——2、当中列要完整显示——3、当中列要优先加载用定位来做(推荐)html代码:<body > <div id="left">left</div> <div id="middle">middle</div> <div id="right">right</div><...原创 2020-01-07 12:23:26 · 108 阅读 · 0 评论 -
百分比参照于谁?
width margin padding:包含块的width;height:包含块的height;left:包含块的width;top :包含块的height;原创 2020-01-06 18:57:35 · 70 阅读 · 0 评论 -
包含块
浮动元素的包含块其包含块定义为最近的块级祖先元素。定位元素的包含块1、“根元素”的包含块也称为初始化包含块,由用户代理建立。在HTML中,根元素就是html元素,不过有些浏览器会使用body作为根元素。在大多数浏览器中,初始化包含块是一个视窗大小的矩形。2、position:relative或position:static包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成。...原创 2020-01-06 18:46:29 · 92 阅读 · 0 评论 -
IE6中float元素双倍margin问题
在IE6中,当给某元素设置float时,同时给该元素设置margin时,他会有双倍外边距的问题p { float:right; margin-right:10px; /*页面真正显示的是margin-right:20px */}解决方案1p { float:right; margin-right:10px; /*页面真正显示的是margin-right:20px */ _mar...原创 2020-01-06 14:54:38 · 261 阅读 · 0 评论 -
Css-hack:选择符级hack
在选择器前添加* html,则该选择器只有IE6可以识别;* html .test { color: #090; } /* For IE6 and earlier */在选择器前添加* + html,则该选择器只有IE7可以识别;* + html .test { color: #ff0; } /* For IE7 */IE8.test:lang(zh-cmn-H...原创 2020-01-06 11:58:05 · 125 阅读 · 0 评论 -
Css-hack:属性级hack
取值:_: 选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。_color: #ff0; /* For IE6 and earlier */*: 选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高*color: #f00; /* For IE7 and earlier */\9: 选择...原创 2020-01-06 11:49:31 · 128 阅读 · 0 评论 -
Css-hack:条件hack
CSS Hack实际上指的时一个特殊代码,这段代码只有在某些浏览器中可以识别,而其他浏览器不能识别,通过这种方式,来为一些浏览器设置特殊的代码。条件Hack条件Hack只对IE浏览器有效,其他的浏览器都会将它识别为注释。IE10及以上的浏览器已经不支持这种格式。<!--[if IE]> <p>为了您和家人的健康,请远离IE!!</p><!--[...原创 2020-01-06 11:32:30 · 134 阅读 · 0 评论 -
ie6中png格式图片修复
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示。解决方法:1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以后,图片的清晰图会有所下降 ; 2.使用JavaScript来解决该问题,需要向页面中引入一个外部的JavaScript文件然后在写一下简单的JS代码,来处理该问题;处理png图片的代...原创 2020-01-06 11:15:32 · 183 阅读 · 0 评论 -
frameset框架集
使用frameset来创建一个框架集。注意frameset不能和body出现在同一个页面中,所以要使用框架集,页面中就不可以使用body标签。属性:----rows,指定框架集中的所有的框架,一行一行的排列----cols, 指定框架集中的所有的页面,一列一列的排列这两个属性frameset必须选择一个,并且需要在属性中指定每一部分所占的大小。<frameset cols="30...原创 2020-01-06 11:03:03 · 200 阅读 · 0 评论 -
表单
<form>标签表单的作用就是用来将用户信息提交给服务器的比如:百度的搜索框 注册 登录这些操作都需要填写表单;action属性使用form标签创建一个表单form标签中必须指定一个action属性,该属性指向的是一个服务器的地址;当我们提交表单时将会提交到action属性对应的地址;<input>标签文本框:type=’‘text’’使用input来创建...原创 2020-01-06 10:59:00 · 139 阅读 · 0 评论 -
CSS Sprite图片精灵技术
• CSS Sprites是一种网页图片应用处理方式。• 通过这种方式我们可以将网页中的零星图片集中放到一张大图上。• 这样一来,一次请求便可以同时加载多张图片,大大提高了图片的加载效率。...原创 2020-01-03 12:26:27 · 147 阅读 · 0 评论 -
背景background
background-color• background-color属性用来为元素设置背景颜色。• 需要指定一个颜色值,当指定了一个颜色以后,整个元素的可见区域都会使用这个颜色作为背景色。• 如果不设置背景颜色,元素默认背景颜色为透明,实际上会显示父元素的背景颜色。background-image• background-image可以为元素指定背景图片。• 和backgro...原创 2020-01-03 11:27:03 · 77 阅读 · 0 评论 -
opacity设置元素背景透明
opacity可选值 0-1;0 表示完全透明1 表示完成不透明注意:opacity属性在ie8及一下的浏览器不支持filter属性值:alpha(opacity=0)属性值范围:0~1000:表示完全透明100:表示完全不透明注意:这种方式支持ie6,但一般浏览器模拟器无法测试。兼容写法:opacity: 0;filter: alpha(opacity=0);...原创 2020-01-03 10:41:58 · 473 阅读 · 0 评论 -
z-index层级
z-index应用背景:如果层级一样的情况下,后面的元素会盖住前面的元素。这里的前后是指html中结构上的前后。• 当元素开启定位以后就可以设置z-index这个属性。• 这个属性可以提升定位元素所在的层级。• z-index可以指定一个整数作为参数,值越大元素显示的优先级越高,也就是z-index值较大的元素会显示在网页的最上层。注意:1、父元素盖不住子元素。2、如果父元素有设...原创 2020-01-03 10:16:12 · 1347 阅读 · 0 评论 -
定位
什么是定位?position属性可以控制Web浏览器如何以及在何处显示特定的元素。• 可以使用position属性把一个元素放置到网页中的任何位置。• 可选值:– static– relative– absolute– fixedposition:relative(相对定位)• 每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元...原创 2020-01-03 09:57:11 · 109 阅读 · 1 评论 -
clearfix详解
clearclear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置。• 可选值:– left:忽略元素左侧浮动影响– right:忽略元素右侧浮动影响– both:忽略元素两边浮动影响– none:不忽略浮动,默认值清楚浮动方案1、可以在父元素的底部,添加一个空白的块级元素,并且给该元素设置clear:both;(兼容各种浏览器,w3c...原创 2020-01-03 00:02:36 · 2088 阅读 · 0 评论 -
父元素高度塌陷和BFC
父元素高度塌陷在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素多高。子元素设置浮动或者设置绝对定位后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素高度塌陷。则父元素下面的元素会向上移动,导致布局混乱。BFC根据w3c的标准,在页面中元素都有一个隐含的属性叫做Block Formatting Context,简称BFC。该属性可以设置打开或...原创 2020-01-02 23:21:35 · 533 阅读 · 0 评论 -
float浮动
浮动所谓浮动指的是使元素脱离原来的文本流,在父元素中浮动起来。浮动使用float属性。• 可选值:– none:不浮动– left:向左浮动– right:向右浮动1、块级元素和行内元素都可以浮动,当一个行内元素浮动以后将会自动变为一个块级元素。2、当一个块级元素浮动以后,宽度会默认被内容撑开,所以当漂浮一个块级元素时我们都会为其指定一个宽度。3、当一个元素浮动以后,其下方的元素...原创 2020-01-02 22:15:29 · 1033 阅读 · 0 评论 -
文档流
文档流它指的是文档中可现实的对象在排列时所占用的位置。文档流处在网页的最底层,它表示的是一个页面中的位置。我们所创建的元素默认都在文档流中。元素在文档流中的特点块元素:1、块元素在文档流中会独占一行,块元素会自上向下排列2、块元素在文档流中,默认宽度值是auto,默认宽度也就是父元 素的100%3、块元素在文档流中,默认高度被内容撑开。内联元素:1、内联元素在文档流中...原创 2020-01-02 19:45:53 · 70 阅读 · 0 评论 -
overflow属性
应用背景:当相关标签里面的内容超出了样式的宽度和高度是,就会发生一些奇怪的事情,浏览器会让内容溢出盒子。overflow来控制内容溢出的情况。可选值:– visible:默认值– scroll:添加滚动条– auto:根据需要添加滚动条– hidden:隐藏超出盒子的内容...原创 2020-01-02 19:36:55 · 112 阅读 · 0 评论 -
垂直外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。注意:只有普通文档流中块元素的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。当一个元素出现在另一个元素上面时(兄弟元素之间)它们的上元素的下外边距和下元素的上外边距也会发生合并,取两者之间的较大值当一个元素包含在另一个元素中时(父子...原创 2020-01-02 16:23:56 · 331 阅读 · 0 评论 -
display:none和visibilty:hidden
display:none;隐藏元素(元素将在页面中完全消失);visibility:hidden使用visibility隐藏一个元素,隐藏后其在文档中所占的位置会依然保持,不会被其他元素覆盖。...原创 2020-01-02 16:05:22 · 110 阅读 · 0 评论 -
盒模型简介
在网页中“一切皆是盒子”盒子CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里。为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。盒子模型一个盒子我们会分成几个部分:– 内容区(content)– 内边距(padding)– 边框(border)– 外边...原创 2020-01-02 16:01:06 · 186 阅读 · 1 评论 -
text-align和text-indent
text-align用于设置文本的对齐方式。可选值:– left:左对齐– right:右对齐– justify:两边对齐– center:居中对齐text-indent用来设置首行缩进。该样式需要指定一个长度,并且只对第一行生效。...原创 2020-01-02 15:35:38 · 751 阅读 · 0 评论 -
letter-spacing和word-spacing
letter-spacing用来设置字符之间的间距。word-spacing用来设置单词之间的间距。这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离,而负数代表减少距离。...原创 2020-01-02 15:34:01 · 148 阅读 · 0 评论 -
text-decoration文本的修饰
用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。可选值:– underline– overline– line-through– none原创 2020-01-02 15:33:02 · 298 阅读 · 0 评论 -
text-transform大小写
用于将元素中的字母全 都变成大写或小写。– 大写:text-transform:uppercase– 小写:text-tansform:lowercase– 首字母大写:text-transform:capitalize– 正常:text-transform:none...原创 2020-01-02 15:31:44 · 136 阅读 · 0 评论 -
line-height
行间距line-height用于设置行高,行高越大则行间距越大。行间距 = line-height – font-size可接受的值:直接接收一个带px单位的值可以指定一个百分数,则会相对于fong-size大小去计算可以直接传一个数值,这会相对font-size的大小相应的倍数应用:对于单行文本来说,可以将行号设置为和父元素的高度一致,这样可以单行文本在父元素中垂直居中...原创 2020-01-02 00:12:27 · 81 阅读 · 0 评论 -
字体样式
font-size用来指定文字的大小。font-family可以指定标签中文字使用的字体通过font-family可以同时指定多个字体。例如:p{font-family:Arial , Helvetica , sans-serif}如上我实际上指定了三种字体,浏览器会优先使用第一个,如果没有找到则使用第二个,以此类推font-style用来指定文本的斜体。– 指定斜体:...原创 2020-01-01 23:17:30 · 61 阅读 · 0 评论 -
px、百分比、em
px– 如果我们将一个图片放大的话,我们会发现一个图片是有一个一个的小色块构成的,这一个小色块就是一个像素,也就是1px,对于不同的显示器来说一个像素的大小是不同的。百分比– 也可以使用一个百分数来表示一个大小,百分比是相对于父元素来说的,如果父元素使用的大小是16px, 则100%就是16px,200%就是32px。em– em是相对于当前元素说的,1em = 1 font-s...原创 2020-01-01 22:45:21 · 320 阅读 · 0 评论 -
列表
无序列表使用ul和li来创建一个无序列表。列表项1列表项2 列表项3代码实例:<ul><li>列表项1</li><li>列表项2</li> <li>列表项3</li></ul>有序列表使用ol和li来创建一个有序列表列表项1列表项2 列表项3<ol>...原创 2020-01-01 22:28:20 · 58 阅读 · 0 评论 -
文本标签
<em>和<strong>em标签用于表示一段内容中的着重点。strong标签用于表示一个内容的重要性。这两个标签可以单独使用,也可以一起使用。<p><strong>警告:任何情况下不要接近僵尸。</strong>他们只是 <em>看起来</em> 很友好,实际上他们是为了吃你的胳膊!</p&g...原创 2020-01-01 17:00:52 · 105 阅读 · 0 评论 -
css样式继承
在css样式中,祖先元素上的样式,也会被它的后代元素所继承继承属性:color,font系列非继承属性:背景相关、边框相关、定位相关原创 2020-01-01 17:01:32 · 91 阅读 · 0 评论 -
伪元素选择器
常见的伪元素选择器原创 2020-01-01 15:57:50 · 91 阅读 · 0 评论