博客列表 >第八期线上培训--内联框架和css优先级和id,class标签选择器和盒子模型--19-9-2 22:00

第八期线上培训--内联框架和css优先级和id,class标签选择器和盒子模型--19-9-2 22:00

黄健的博客
黄健的博客原创
2019年09月08日 14:51:031100浏览
  1. 实例演示:<iframe>标签的使用


    iframe的作用是在当前页面加载另一个页面,name属性可以与a标签搭配使用,name值等于target值。

    

<a href="http://www.php.cn" target="main"> php中文网</a>
<iframe frameborder="1" src="http://www.baidu.com" width="500" height="500" name="main"></iframe

i1.png

i2.png


2. css选择样式设置优先级

    css分为,内联样式,内部样式,外外部样式。写在标签上的样式是内联样式;在head的style标签里的是内部样式;用link标签引入的是外部样式。

    优先级:内联>内部>外部


 3.css的id,class与标签选择器的使用规则

    标签选择器的使用规则:在样式表里 写入对应的标签

    id选择器:#+对应id名

    类选择器: .+对应类名

h1,form,table{
    color:red;
}
//id选择器
#dome{
    color:red;
}
//类选择器
.test{
    color:red;
}


4.实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)

    width宽度;height高度;border边框;padding内边距;margin外边距

    此处有两个盒子,外边盒子只有个边框方便观察里面盒子。

b1.pngb2.png


总结:内联框架在后端管理页面经常使用;css的优先级决定了展示怎样的样式;盒子的宽高边框和内外边距很重要。




声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议