浏览器默认样式

css总结 专栏收录该内容
10 篇文章 0 订阅

1、设置浏览器默认样式的原因

由于同一个标签在不同浏览器中有不同的默认样式,为了让样式在所有浏览器中统一,并希望页面更加符合美观简洁和将一些常用样式加入到自定义样式中去使用我们应该做浏览器默默人样式的初始化

2、浏览器默认样式的检查方法:

可以用border+浏览器开发者工具来查看是否有默认样式

3、常见浏览器默认样式

1、文字斜体加粗字体样式:font-weight:normal;font-style:normal;
2、清除body、ul等区块元素的内填充和外边距:margin:0;padding:0;
3、清除li的默认样式:list-style:none;
4、清除img在ie下边框以及img与文字的对齐方式为居中:border:none;vertical-align:middle;
5、a标签和其状态性伪类的默认样式:

a{textdecoration:none;color:#000;border:0;

a:link{text-decoration:none; color:#000;} //有链接属性的并且未访问过的 – href 属性 a:visited{text-decoration:none; color:#000;} //链接地址被访问过 a:hover{text-decoration:none; color:#000;}( //鼠标移动到DOM节点上面 a:active{text-decoration:none; color:#000;} //鼠标点击瞬间
6、为所有元素*设置盒模型的样式和字体颜色:box-sizing:border-box;color:#000;
7、为body设置初始样式:

 body{
        font-size:12px;
        font-family:Arial,Verdana,Tahoma,"微软雅黑","黑体";
        line-height:120%;
        background:#fff;
        margin:0;
        overflow-x:hidden;
    }

4、附加

1、改变元素透明度:

opacity:0.9; //赋值0-1,透明到完全不透明
filter:alpha(opacity=90); //为了兼容低版本ie浏览器的滤镜

2、css3的新的赋值颜色的方法:rgba

 rgba(r,g,b,a); //r、g、b依然是光的三原色,a是alpha,代表透明度0-1 

注意:rgba只能做有颜色地方的半透明,而opacity可以为整个元素设置半透明
3、隐藏元素:

  visibility:hidden/visible; //隐藏元素但是依然占位
    display:none/block; //隐藏元素但是不占位

注意:虽然visibility:hidden的隐藏元素依然占位,但是它与透明度为0有区别,透明度为0的元素我们依然可以摸到,但是visibility:hidden的元素却无法摸得到
4、overflow:溢出元素的部分如何显示

 overflow-x:; //水平方向溢出
    overflow-y:; //垂直方向溢出
    overflow:; //两个方向溢出

值有5个:
visible:默认值。溢出的内容不会被修剪,会呈现在元素框之外;
hidden:溢出的内容会被修剪,并且其余内容是不可见的;(如上面的初始化默认样式中的overflow-x:hidden;,让body的内容在水平方向溢出时裁切,不显示滚动条)
scroll:溢出的内容会被修剪,浏览器会显示滚动条以便查看其余的内容;
auto:如果溢出的内容被修剪,则浏览器会显示滚动条以便查看其余的内容;
inherit:规定应该从父元素继承 overflow 属性的值
5、百分比单位的使用:
我们在之前设置字体的行高等样式时,使用了百分,表示字体大小的百分之多少,除了这些地方以外,盒子模型也可以用百分比,子元素的百分比宽高是父元素宽高的百分比。但是子元素的padding和margin设置百分比时却不是对应父元素的内填充和外边距,而是父元素的宽(后面学习的left和top依然是父元素的宽高,需要注意)
6、最大最小宽高:可以配合上面的百分比宽高一起使用,做一个变化带有范围的效果:max-width:;(最大宽)/min-width:;(最小宽)/max-height:;(最大高)/min-height:;(最小高)
7、outline(轮廓线):它是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,它不会占据空间,也不一定是矩形。可以按顺序设置如下属性:

   outline-color:; //轮廓线颜色
    outline-style:; //轮廓线样式
    outline-width:; //轮廓线宽度
    outline-offset:; //轮廓线扩张
  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

喵半仙

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值