html+css
关注
分享
扫一扫
文章平均质量分 76
从誩从羊
这个作者很懒，什么都没留下…
展开
-
关于select下拉选择框样式的修改
这里对于select下拉样式的修改采用了模拟下拉框的方式，以下是代码，可根据需要自行修改<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g原创 2020-12-23 14:58:06 · 4550 阅读 · 0 评论 -
关于css的水平居中和垂直居中问题
水平居中：1. .parent{text-align: center;}.child{display: inline-block;} 兼容性比较好 2. 使用margin：0 auto .child{width:200px;margin:0 auto;} 需要指定宽度 3.使用table .child{display:table;margin:0 ...原创 2020-03-29 15:07:23 · 131 阅读 · 0 评论 -
html背景图片自适应大小问题
body{background:url(./img/background.jpg)no-repeat;/*width:100%;height:auto;*/background-size:cover;overflow:hidden;}...原创 2020-03-29 15:09:19 · 1249 阅读 · 0 评论 -
常用浏览器的内核
常见5大浏览器内核：chrome：早期webkit，后改为blinkFirefox：Geckosafari：与谷歌相同 webkitOpera：开始使用原创的Presto，后被收购与chrome一致，webkit、blinkIE： Trident原创 2020-07-28 20:49:57 · 138 阅读 · 0 评论 -
关于margin的塌陷问题
1、兄弟关系的外间距塌陷： 元素并列，垂直方向相邻的margin相遇会出现叠加：两值不同时取较大的值 原因：上下两兄弟关系的盒子共用一个外间距 解决： 1）、为两盒子分别套一个父级盒子，并在父级盒子添加overflow：hidden 2）、 将两兄弟分别触发BFC2、并列关系的外间距塌陷 元素嵌套：子元素的margin-top会叠加给父元素 原因：父子共用一个外间距区域 解决：1） 使用border-top或者padding-t...原创 2020-07-28 21:04:56 · 174 阅读 · 0 评论 -
html清除浮动的方法
（1） 给浮动元素的父级盒设置一个固定高度（不灵活。适用于高度固定）（2）给父级盒加浮动（会产生新的浮动问题）（3） 为父级盒添加overflow属性（可能会使内容显示不全）（4）浮动元素后加空div 设置css clear：both（5）给父级盒加 calss ，clearfix设置css .clearfix{ *zoom:1} .clearfix::after{content:""; display:block; clear:both }...原创 2020-08-04 21:58:05 · 130 阅读 · 0 评论 -
html的img标签下方间隙问题
1、为img父元素设置font-size：0； line-height：02、将img 转为块级元素3、为img设置vertical-align4、为img父元素设置高，添加overflow：hidden原创 2020-08-06 21:30:16 · 212 阅读 · 0 评论 -
html经典布局及其实现
#多栏布局-什么是自适应？让同一个页面自动适应不同大小的设备，解决为不同设备提供不同版本的页面问题-自适应布局大部分自适应布局指的是宽度自适应布局，解决的是在不同大小的设备上呈现相同网页的问题页面元素位置发生变化，元素不随窗口大小的调整而变化##1、两列自适应布局——左侧宽度固定，右侧宽度自适应-1）左右两个盒子，左侧宽度固定，右侧宽度设置100%-2）左侧盒子设置绝对定位position:absolute;-3）右侧盒子中添加子盒...原创 2020-08-17 08:52:59 · 593 阅读 · 0 评论 -
文本溢出显示省略号
1、单行文本溢出显示省略号 给文本设置overflow：hidden；white-space:nowrap(强制不换行)； text-overflow：ellipsis2、多行文本溢出显示省略号 使用伪元素模拟省略号原创 2020-08-18 21:16:46 · 184 阅读 · 0 评论 -
常见浏览器兼容问题
1、ie8 图片边框问题： img{border：none}2、IE8中背景复合属性写法问题（背景图不显示）：background:url() no-repeat; 注意url（）后面要加上空格3、定义鼠标形状为手并兼容所有浏览器： .box{ cursor:pointer}4、在ie6以及更低版本中定义小高问题： 设置font-size：0；line-height：05、ie及更早版本浮动产生双边距问题： 使用 _display:inline6、ie7以及更早版本中子元...原创 2020-08-18 21:34:08 · 165 阅读 · 0 评论 -
BFC 特性以及解决的问题
BFC——BlockFormattingContext##1、什么是BFC？块级格式化上下文，是w3c中css2.1规范中的一个概念。web页面可视化css视觉渲染的一部分，是页面中一个独立的渲染区域，用于决定块盒子的布局及浮动相互影响范围的一个区域。具有BFC特性的元素可以看作是一个隔离的独立容器，容器内元素不会在布局上影响到外面的元素。##2、怎样生成BFC-根元素-float:left|right;-position:absolute|fixed;...原创 2020-08-18 21:41:37 · 443 阅读 · 0 评论 -
css引入方式link和@important的区别
1、link是html标签，@important是css中定义的，只能加载css2、link在页面载入时同时加载，@important在页面载入后加载3、link无兼容问题，@important在css2.1以下不支持，4、js可以通过控制dom去修改link引入的样式，而@important不可以通过js修改...原创 2020-08-19 19:57:43 · 1027 阅读 · 0 评论 -
移动端常见布局方案
1、流式布局宽度使用百分比代替固定宽度px，高度大多使用px固定，因此在大屏幕手机下显示效果会变成页面元素宽度被拉长，高度和原来保持一致-优点可以很好解决自适应问题-缺点实际显示效果不协调；大量使用百分比布局，会出现兼容问题；设计有局限性2、固定布局设置viewport，布局与PC端一致，假设整个网页的宽度为320px居中，超出部分留白-优点：思路沿用PC端，上手容易-缺点：大屏幕手机及手机横屏的时...原创 2020-08-19 20:02:23 · 520 阅读 · 0 评论 -
CSS3中过渡和动画的区别和各自适用场景？
区别：1、语法： 过渡——transition: 属性名 完成时间 速度曲线 延迟时间; 动画——需要先定义关键帧，再通过animation属性引用关键帧2、触发： 过渡：需要借助伪类、js、@media触发 动画：自动触发3、执行次数 过渡：执行一次后不会执行，但是可以借助transitionEnd事件添加循环； 动画：可以通过属性设置循环次数；4、复杂度...原创 2020-08-19 20:04:56 · 1136 阅读 · 0 评论 -
实现元素水平垂直居中的方式——绝对居中
1、margin:auto;实现有width属性和height属性的绝对定位元素的居中-元素必须要有width属性和height属性-元素必须要有绝对定位-偏移属性设置：left:0;right:0;top:0;bottom:0;-margin属性设置：margin:auto;2、margin负间距实现有width属性和height属性的绝对定位元素的居中-元素必须要有width属性和height属性-...原创 2020-08-19 20:07:21 · 167 阅读 · 0 评论 -
修改input单选按钮自带样式
labelinput[type="radio"]{appearance:none;-webkit-appearance:none;outline:none;margin:0;}labelinput[type="radio"]:after{display:block;content:"";width:12p...原创 2020-08-27 14:16:25 · 758 阅读 · 0 评论