【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » 教程 » 正文

css3基础知识+流式布局

放大字体  缩小字体 发布日期:2020-04-11 22:11:44    浏览次数:13
导读

  6.5 :after, 用来和 content 属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。  6.6 :before, 用来和 content 属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。  6.12 E:target对页面中的某个target元素指定样式,在用户单击了页面中的链接并且跳转到了target元素才会生效匹配相关url

  6.5 :after, 用来和 content 属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。

  6.6 :before, 用来和 content 属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。

  6.12 E:target对页面中的某个target元素指定样式,在用户单击了页面中的链接并且跳转到了target元素才会生效匹配相关url指定的E元素

  7.8 E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素(同种元素只存在一个)

  盒子模型的高度和宽度:css内定义的是填充以里的内容范围,一个元素的实际宽度(盒子的宽度)=左边界+左边框+左填充+内容+右填充+右边框+右边界

  4.1流动模型(flow)(默认的布局):块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,以行的形式占据,内联元素都会在所处的包含元素下从左到右水平分布显示。

  4.2浮动模型(float):使用float,让块状元素并排在一行显示。(浮动框脱离普通的文档流)

  4.3.1绝对定位(position absolute)将元素从文档流中脱离出来,然后使用left,top,right,bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位,如果没有,这相对于body元素,即相对与浏览器窗口。(当设置了绝对定位以后,没有定义宽度,宽度由内容决定)

  4.3.2相对定位(position relative)相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。(相对定位相对于盒子原来的位置发生偏移,而且原来的盒子的位置保留不动,即偏移前的位置依然存在,不能被其他元素覆盖。)(依旧处于标准的文档流中,随即拥有了偏移属性和Z-index属性)

  5.3 overflow 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容,值为auto,hidden,scroll(超过内容显示滚动条)

  5.4 clear 该属性的值指出了不允许有浮动对象的边,值为left,right,both(两边都不允许有浮动元素)

  5.5 z-index 检索或设置对象的层叠顺序。较大 number 值的对象会覆盖在较小 number 值的对象之上。

  6.4 HSL颜色,色相(hue),饱和度(saturability),亮度(luminance)的模式来声明颜色,HSL模式基于360度的色相环,第一个数代表色相,60度为黄色,120度为绿色,180度为青色,240度为蓝色,300度为洋红色,3600度为红色,第二个数代表饱和度,格式为百分比,第三个数为亮度,格式为从0(全黑)到100%(全白)之间

  6.5 HSLA,RGBA与前面用法一致,只是添加了一个介于0(全透明)-1(不透明)的透明度,

  响应式网页布局(RWD responsive web design),三种技术(弹性网格布局,弹性图片,媒体和媒体查询):针对任意设备对网页内容进行布局的一种显示机制。

  Css3中的媒体查询:(问题:什么是css媒体查询,如何在css文件中引入媒体查询,如何利用媒体查询来制作响应式网页,如何让移动浏览器像桌面浏览器一样渲染我们的页面

  媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,媒体查询可用于检测的媒体特性有width,和height,color,等,使用媒体查询可以在不改变页面内容 情况下,为特定的一些输出设备定制显示效果。

  在css2中,通过link标签中的media属性为样式表指定设备类型(如显示屏或者打印机),

  5:媒体查询能检测的特性:最常用的是视口宽度(width)和屏幕宽度(device-width)

  Aspect-ratio:基于视口宽度和高度的比,一个16:9比例的显示屏可以这样定义16/9

  现代浏览器可以智能的忽视与自身不匹配的样式文件,但他却不一定不下载这些文件,因此将不同媒体查询样式保存在独立的文件中没有多大的好处,使用独立的文件反而会增加用于页面渲染的http请求数量,从而导致网页加载变慢。

  通过设置栏位的宽度:#main{column-width:12em},无论视口多大,内容都会分布在宽度为12em的栏位中,栏位的数量有视口大小调整

  通过设置栏位的数量:#main{column-count:4}栏位的数量不变,宽度根据视口自动调整。

  左边一列设置宽高,右边一列设置绝对定位absolute(脱离文档流),利用margin-left来控制与左边的间距

  问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...

  选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...

  一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...

  一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...

  清晨太阳初升,潮湿的空气里弥漫着花香,昨夜是一场大雨,在一场感情的游戏里,最苦即是相思,伴随着昨夜的大雨,清照喝的...

 
关键词: css3的基础知识
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-129016.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4