随笔分类 - html/css
摘要:1.什么是盒模型 盒模型(内容(content),内边距(padding),边框(border),外边距(margin)),值得注意的是,块级元素可以设置宽高,内边距,边框,外边距 行内元素宽高自动,并排显示。 2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么
阅读全文
摘要:1. 引入js 文件 <script type="text/javascript" src="js/grayscale.js"></script> 链接:https://pan.baidu.com/s/1JL64tGFvCnk5ZrvetkupFQ 提取码:9frp 复制这段内容后打开百度网盘手机A
阅读全文
摘要:.使用默认otpion再disable此选项 <select> <option value="" disabled selected>Select your option</option> <option value="hurr">Durr</option </select> 效果如下: 转自:ht
阅读全文
摘要:1. line-height 适用场景:单行文字,下拉框,按钮等 原理:将单行文字设置行高以后,文字会位于行高的中间位置。也就是需要将元素的 line-height 设置成和高度一样。 示例如下 <style> .content{ width: 400px; background: #ccc; li
阅读全文
摘要:html 代码: <div> <select name=""> <option value="芝士">芝士</option> <option value="奶油">奶油</option> </select> </div> 给select添加父元素div目的是为了,用div的样式覆盖住select样式
阅读全文
摘要:方法一:footer 高度固定+绝对定位 <html> <head> <style type="text/css"> html{height:100%;} body{min-height:100%;margin:0;padding:0;position:relative;} .header{back
阅读全文
摘要:看了好多的文章,就只是在看他们的换算,没有实际做出例子所以一直很疑惑,不知道到底是怎么写的。今天写了一个demo。务必彻底弄清楚。 先说三者的区别: 首先是我们常见的px. px: em:相对长度单位。是相对于当前对象内文本的字体尺寸。如 当前对行内文本的字体尺寸未被认为设置,则相对于浏览器的默认字
阅读全文
摘要:.bgLeft { position: absolute; left: -95px; background: url("../images/logo_1.png") left top; background-repeat: no-repeat; width: 328px; height: 146px
阅读全文
摘要:关于z-inde,这个网址还是对我受益匪浅的,https://www.cnblogs.com/bigboyLin/p/4621335.html z-index 起作用得有一个前提: 就是和定位一起用,position:absolute,relative,fixed,都是可以的,inherit 继承要
阅读全文
摘要:例如: 因为左右是宽度是用百分比表示,img 设置为width:100%; 那么不同的分辨率下, 问题1: 图片的宽高就是变化的, 问题2: 右边的内容的上下间距也是变化的。 问题3: 不同比例的图片很有可能宽度一样高度不一样。(待解决) 注:(还没有找到很好的解决办法,答案待定)
阅读全文
摘要:最好用 背景图片,eg:
阅读全文
摘要:自适应: 在不同分辨率下不同设备上显示相同的页面。即:根据屏幕的宽度,自动调节网页内容的大小,使其主体内容和布局不变。 响应式: 响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局。 (1)允许网页的宽度自动的调整 (2)尽量少使用绝
阅读全文
摘要:之前我们见的fixed就是固定在低端。后来我遇到一个问题 如果 这样写: div{ position: fixed; left: 0; bottom: 0; } 内容吧div撑开,有多少算多少 div{ position: fixed; left: 0; right: 0; bottom: 0; }
阅读全文
摘要:做移动端或者响应式的页面必然需要字体的变化的。这次我就自己的经验来说说他们之间的关系,以及怎么用。 px (绝对单位)是我们常用的就不说了。 em(相对单位,相对父级) em 指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,
阅读全文
摘要:img vertical-align:middle; 设置页面垂直居中的,如果无效的话使用 display:table-cel,讲块元素转化为单元格,在使用vertical-align属性水质居中。 max-width:100%; 限制了图片大小。图片本身是多大就是多大。不会超过100%的宽度; w
阅读全文
摘要:<div class="div"> <h2>我处于垂直居中状态</h2> </div> <style> .div{position:relative:} .div h2{position:absolute;left:50%; top:50%; margin-left:-50px; margin-to
阅读全文
摘要:1.优先级问题 style>id>class>标签 如果标签加上 !important,那么 !important>style>id>class
阅读全文
摘要:这个页面也是我看到别人的写的,感觉不错,就自己留下了为了以后自己可以容易找到,也希望可以方便到别人。 写这个页面 需要注意的是: 1.写每一个小图片的位置时候,要用id,这样等级就高了,不然不起作用。 2.因为每个图片的大小位置距离是差不多的。加入是30px, 那么第一个位置就是(-20px,-20
阅读全文
摘要:单行实现垂直居中: 直接让height和line-height相等 div{ height:50px; line-height:50px; overflow:hidden;(防止超出div宽度,内容换行,就不能有效果了) }多行文字,div固定高度实现垂直居中: <style type="text/
阅读全文
摘要:多行文本固定高度的居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http
阅读全文