【css3中的布局相关样式】的更多相关文章

css3中的布局相关样式

web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点,譬如如果两栏或多栏中元素的内容高度不一致则底部很难对齐.因此在css3中追加了一些新的布局方式. 这里主要介绍多栏布局与盒布局,到目前为止这两种布局方式受到了firefox.safari及chrome浏览器的支持. 一.多栏布局 针对使用float属性或position属性出现的缺点,css3中使用…

CSS3 文字与字体相关样式

给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前三个length分别指阴影离开文字横向距离.纵向距离(这两个参数允许值为负)和模糊半径(值越大模糊范围越大,默认为0,不模糊),color指定阴影的颜色 div { text-shadow:5px 5px 10px gray; } 让文本换行 很多浏览器本身自带换行功能,在css3中可以使用word…

CSS3中与文字相关的样式

1.给文字添加阴影:text-shadow属性(特别指出IE浏览器要IE10+的版本才支持)    语法如下: text-shadow:length length length color; 其中,第一个参数length表示阴影离开文字的横向距离,为必需参数,该值为正时, 阴影在文字的右方,该值为负时,阴影在文字的左方:第二个参数length表示阴影离开文字 的纵向距离,为必需参数,该值为正时,阴影在文字的下方,该值为负时,阴影在文字上方 :第三个length表示阴影的模糊半径,模糊半径为可选参…

Css3中自适应布局单位vh、vw

视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口). 视口单位中的"视口",桌面端指的是浏览器的可视区域:移动端指的就是Viewport中的Layout Viewport, "视区"所指为浏览器内部的可视区域大小,即window.innerWidth/w…

第103天：CSS3中Flex布局（伸缩布局）详解

一.Flex布局 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行内元素也可以使用Flex布局. .box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀. .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意:设为Flex布局以后,子元素…

css3背景与边框相关样式

background-attachment          背景图像是否固定或者随着页面的其余部分滚动 background-color                    设置元素的背景颜色 background-image                    把图片设置为背景 background-position               设置图片的起始位置 background-repeat                    设置背景图片是否及如何重复   css3新增的背景…

CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色 2. 使用服务器端字体 文本换行: word-break:norma | keep-all | bread-all norma(使用浏览器默认的换行规则), keep-all(只能在半角空格或连字符处换行), bread-all(允许在单词内换行) 优先使用客户端字体 1 @font…

CSS3学习系列之盒样式（一）

盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1中追加的一个盒类型,属于block类型的一种,但是显示时它具有inline类型盒的特点,例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">…

CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）

CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽度来进行,指定方法如下所示 <meta name="viewport" content="width=600px" /> CSS可以通过设置media来决定该样式所适用的设备,如screen.tv.print.speech.handheld.all等 <…

Css3中的响应式布局的应用

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type=&qu…