网站开发软件技术专业好吗,网站建设的平面设计,动漫设计专业需要学什么,手机访问网站 自动缩放大标题小节一、弹性盒1. 标准盒模型和怪异盒模型2. 弹性盒dipalay3. 与display配合使用的其他属性4. 弹性盒的对齐方式5. 弹性盒的默认特性二、响应式布局1. 媒体查询2. 怎样使用媒体查询3. 优缺点以及使用场景4. Meta 标签的定义5. 常见的属性操作三、多列布局四、移动端布局1…大标题小节一、弹性盒1. 标准盒模型和怪异盒模型2. 弹性盒dipalay3. 与display配合使用的其他属性4. 弹性盒的对齐方式5. 弹性盒的默认特性二、响应式布局1. 媒体查询2. 怎样使用媒体查询3. 优缺点以及使用场景4. Meta 标签的定义5. 常见的属性操作三、多列布局四、移动端布局1. 百分比弹性布局2. rem3. vw、vh一、弹性盒 css 中盒子模型分为两种 w3c 标准标准盒模型 和 IE标准盒子模型怪异盒模型 通过 box-sizing: content-box默认标准盒模型/border-box怪异盒模型; 来转换。 大多数浏览器在采用 w3c 标准模型而 IE 中采用 Microsoft 自己的标准怪异模型是“部分浏览器在支持 w3c 标准的同时还保留了原来的解析模式”怪异模式主要表现在 IE 内核的浏览器。当没有 doctype 时即没有!DOCTYPE html声明时IE6 会触发怪异模式。 1. 标准盒模型 和 怪异盒模型IE 盒子模型
1在标准模式下一个块的总宽度 width margin(左右) padding(左右) border(左右)
2在IE盒子模型下一个块的总宽度 width margin(左右)即width已经包含了padding和border值 3示例给 div标签 和 p标签 设置一样的宽高但是 div标签 有 border、padding 值。 2. 弹性盒 display 兼容写法-webkit-display:设置在父元素上。使用弹性盒后 float、vertical-align、多列等都样式都无效 display 的属性值
box将对象作为弹性伸缩盒显示。伸缩盒最老版本inline-box将对象作为内联块级弹性伸缩盒显示。伸缩盒最老版本flexbox将对象作为弹性伸缩盒显示。伸缩盒过渡版本inline-flexbox将对象作为内联块级弹性伸缩盒显示。伸缩盒过渡版本flex 将对象作为弹性伸缩盒显示。伸缩盒最新版本inline-flex将对象作为内联块级弹性伸缩盒显示。伸缩盒最新版本 3. display 配合使用的其他属性
1flex-direction:排列方式写在父元素身上 兼容写法 -webkit-flex-direction:。
row默认的排列方式横向从左到右排列左对齐 row-reverse反转横向排列右对齐从后往前排最后一项排在最前面column纵向排列column-reverse反转纵向排列从后往前排最后一项排在最上面
2order:弹性盒子子元素顺序设置在子元素上
负数靠前越小越前0为原始位置正整数靠后越大越后 给子元素设置了orderorder值越大顺序越靠后 style*{margin:0; padding:0;}ul{display: flex;background:#9f9;}li{list-style: none;width: 50px;height: 50px;border:1px solid #000;}ul.one li:nth-child(1){order:1}ul.one li:nth-child(2){order:0}ul.one li:nth-child(3){order:13}ul.one li:nth-child(4){order:-2}ul.one li:nth-child(5){order:-1}
/style
bodyul classoneli1/lili2/lili3/lili4/lili5/li/ul
/body3flex-grow:弹性盒分配剩余空间设置在子元素上
0 为默认分配提成数字 没有设置flex-grow的子元素宽度不变设置flex-grow了的子元素宽度 原宽度 剩余宽度*分配剩余空间比例 分配剩余空间比例 flex-grow值/所有flex-grow值之和。 style*{margin:0; padding:0;}ul.two{display: flex;background:#9f9;width: 400px;} /*li的总宽度是50px*5250;剩余空间是400-250150px*/li{list-style: none;width: 50px;height: 50px;border:1px solid #000;}/*剩余空间总共分成了235份第2个li占了2分所以分配到了150*2/560px总宽度是5060110px*/ul.two li:nth-child(2){flex-grow: 2;}ul.two li:nth-child(5){flex-grow: 3;} /*注意边框的宽度也会被计算进去。这里为了方便看懂就没有把宽度减去了*/
/style
bodyul classtwoli1/lili2/lili3/lili4/lili5/li/ul
/body4flex-shrink:检索弹性盒的收缩比率子元素设置
1 默认数字 设置flex-shrink后所有子元素宽度 原宽度 - 超出宽度*收缩占比 收缩占比flex-shrink/(所有设置flex-shrink的值之和 没有设置flex-shrink的子元素个数)没有设置flex-shrink的值1。 style*{margin:0; padding:0;}ul.three{display: flex;background:#9f9;width: 250px;} /*li的总宽度是50px*5250;剩余空间是400-250150px*/ul.three li{width:90px;}/*有5个li总宽度是90px*5450px超出了450-250200px;*//*flex-shrink默认是1所以没有设置的收缩比率都占了1因此第3个li收缩了比率是2/8也就是说收缩宽度200*2/850所以它的宽度原宽度-收缩宽度90-5040px*/ul.three li:nth-child(3){flex-shrink: 2;}ul.three li:nth-child(4){flex-shrink: 3;}/*设置了flex-shrink之后宽度原宽度-收缩宽度90-200*3/815px*/
/style
bodyul classthreeli1/lili2/lili3/lili4/lili5/li/ul
/body5flex-basis:检索弹性盒伸缩准值子元素设置
auto 默认数字px 设置了flex-basis:之后子元素的宽度原宽度*伸缩比例。 伸缩比例子元素宽度总和/父元素宽度。 style*{margin:0; padding:0;}ul{display: flex;background:#9f9;}/* 设置了flex-basis相当于给子元素设置宽度但是设置这个元素之后可以让子元素的宽度按比列缩放 */ul.four{width: 300px;} /*伸缩准值按比列缩放每个子元素。*/ul.four li{width: 110px;} /*所有li总宽度和li*460500px;要使500*父元素宽度300px得到的?0.6所以出第3个li外其他li宽度110*0.666px*/ul.four li:nth-child(3){flex-basis:60px;} /*第3个li宽度60*0.636*/
/style6flex:伸缩性设置在子元素上 可以设置3个值flex属性是 flex-growflex-shrink 和 flex-basis 这3个CSS属性的缩写推荐使用该属性而不是单独书写
设置一个值分配剩余空间设置三个值0 0 百分比分配
style*{margin:0; padding:0;}ul{display: flex;margin-bottom:10px;text-align: center;}li{list-style: none;background:#efefef;margin:0 5px;}ul.one li{flex:1;}ul.two li{flex:1;}ul.three li:nth-child(1){flex:0 0 50%;}ul.three li:nth-child(2),ul.three li:nth-child(3){flex:1;}ul.four li:nth-child(1){flex:1;}ul.four li:nth-child(2){flex:0 0 33.3333%;}ul.five li:nth-child(1){flex:0 0 25%;}ul.five li:nth-child(2){flex:1;}ul.five li:nth-child(3){flex:0 0 33.3333%;}
/style
bodyul classoneli1/2/lili1/2/li/ulul classtwoli1/3/lili1/3/lili1/3/li/ul ul classthreeli1/2/liliauto/liliauto/li/ulul classfourliauto/lili1/3/li/ul ul classfiveli1/4/liliauto/lili1/3/li/ul
/body7flex-wrap:伸缩换行写在父元素上
nowrap;当子元素溢出父容器时不换行wrap; 当子元素溢出父容器时自动换行wrap-reverse;反转 wrap 排列
8flex-flow:伸缩流方向与换行适用于父类容器上
flex-direction; flex-wrap; 4. 弹性盒的对齐方式
1justify-content主轴横向对齐设置在父元素上
flex-start;左对齐flex-end;右对齐center;居中对齐space-between;分开对齐space-around;分开左右边距对齐
2align-content:主轴纵向对齐设置在父类容器上不常用
flex-start;上对齐flex-end;下对齐center;居中对齐baseline;基线对齐strecth;上下拉升对齐
3侧轴对齐 align-items:设置在父上常用、 align-self:设置在子让某个子元素单独布局
flex-start;上对齐flex-end;右对齐center;居中对齐baseline;基线对齐strecth;上下拉升对齐 5. 弹性盒的默认特性
1默认流向为横向 2若不写宽度默认宽度为 0 或者被内容撑开 3弹性盒的高度若不设置高度与父元素一样高 4弹性盒默认不换行 二、 响应式布局
1. 媒体查询 使用媒体查询原因如果没有CSS3的媒体查询模块就不能针对设备特性如视口宽度设置特定的CSS样式媒体查询可以让我们根据设备显示器的特性如视口宽度、屏幕比例、设备方向横向或纵向为其设定CSS样式媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color 等。好处 使用媒体查询可以在不改变页面内容的情况下为特定的一些输出设备定制显示效果。 2. 怎样使用 media媒体查询 在CSS文件中引入媒体查询 媒体查询写在CSS样式代码的最后CSS是层叠样式表在同一特殊性下靠后的的样式会覆盖前面的样式 1在页面内使用 需要先在 html 文档中添加以下代码用来兼容移动设备的显示效果 meta nameviewport contentwidthdevice-width,initial-scale1,maximum-scale1,user-scalableno/
widthdevice-width宽度等于当前设备的宽度initial-scale1初始的缩放比例(默认为1)maximum-scale1允许用户缩放到得最大比例(默认为1)user-scalableno用户不能手动缩放
/*当设备屏幕宽度在320px——720px之间时媒体查询中body的背景色background-color:red;会重叠之前的body背景色;
当设备屏幕宽度在320px及以下时媒体查询中body的body背景色background-color:blue;会重叠之前的body背景色
*/
style
body{background: #f9f;}
media screen and (max-width:720px) and (min-width:320px){ /* and (min-width:320px)可省略*/body{background-color:red;}
}
media screen and (max-width:320px){body{background-color:blue;}
}
/style2媒体查询外联 css 语法 ① link relstylesheet hrefwide.css mediascreen and (min-width:1024px) /当屏幕宽度最小宽度为1024px大于等于1024px 时引入 wide.css的样式。
② link relstylesheet hrefmobile.css mediascreen and (max-width:320px) /小于等于 320px 时最大宽度是 320px使用 mobile.css 的样式。
③link rel“stylesheet” hrefmedium.css mediascreen and (max-width:1024px) and (min-width:320px) /在 320px 和 1024px 之间的使用 medium.css的样式。
3. 优缺点以及使用场景
1优点 ① 多终端视觉和操作体验非常风格统一 ② 兼容当前及未来新设备 ③ 响应式 web 设计中的大部分技术可以用在 WebApp 开发中 ④ 节约了开发成本维护成本也降低很多
2 缺点 ① 兼容性低版本浏览器兼容性有问题 ② 移动带宽流量相比较手机定制网站流量稍大 ③ 但比较加载一个完整 pc 端网站显然是小得多 ④ 代码累赘会出现隐藏无用的元素加载时间加长 ⑤ 兼容各种设备工作量大
3适用场景 ① 对于重内容的网站例如形象展示则比较适合使用响应式web设计 ② 对于重功能的网站如电子商务类则更推荐使用独立移动网站 4. Meta 标签定义 移动设备上的 viewport 就是设备的屏幕上能用来显示我们的网页的那一块区域再具体一点就是浏览器上(也可能是一个 app 中的 webview)用来显示网页的那部分区域但viewport又不局限于浏览器可视区域的大小它可能比浏览器的可视区域要大也可能比浏览器的可视区域要小。 1使用 viewport meta 标签在手机浏览器上控制布局 meta nameviewport contentwidthdevice-width,initial-scale1,maximum-scale1 /
2隐藏苹果浏览器的工具栏和菜单栏。 全屏显示 meta nameapple-mobile-web-app-capable contentyes /
3设置Web App的状态栏屏幕顶部栏的样式 meta nameapple-mobile-web-app-status-bar-style contentblank / 5. 常见的属性操作
1orientation: 设备方向
2portrait: 监听竖屏指定输出设备中的页面可见区域高度大于或等于宽度
3landscape: 监听横屏除portrait值情况外都是landscape
4min-width:、max-width: 适用于全部屏幕手机和网页的查询
5min-device-width:、max-device-width: 只用于手机分辨查询 三、多列布局 通过 CSS3您能够创建多个列来对文本进行布局 - 就像报纸那样。 Internet Explorer 9 以及更早的版本不支持多列属性 多列属性
1创建多列 column-count: 数字;属性规定元素应该被分隔的列数 2规定列之间的间隔 column-gap: 数字px; 属性规定列之间的间隔 3列规则 column-rule:数字px outset/solid/double/dotted/dashed #颜色 属性设置列之间的宽度、样式和颜色规则
Internet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。 style
div{word-wrap: break-word;width: 400px;column-count: 3; /*规定被分成3列*/column-gap: 30px; /* 这里是文字列和文字列之间的距离*/column-rule: 4px double #f00; /*分隔线样式*/
}
/style
div当前大部分的浏览器支持的是W3c的标准盒模型也保留了对怪异盒模型的支持当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”怪异模式主要表现在IE内核的浏览器。
/div四、移动端页面布局 移动端布局优缺点 优点 1移动端基本都兼容 h5、css3所以可以放心的使用 css3 的样式来布局 2移动端页面一般都不大所以标签使用的并不多开发时间没有 web 端长缺点 移动端宽高尺寸不同因此测量尺寸成为一个难题无法非常精确的写尺寸 因为无法使用正常尺寸不能直接写像素通常用 2 种方式来写
1. 百分比弹性布局
移动端页面基本上和 web 端区别不大但要考虑到移动端屏幕尺寸不大并且都是全屏布局而且尺寸都不一样所以不能使用网页的 固定尺寸 来布局需要使用 百分比 来布局
1宽度的百分比是 屏幕宽度 的百分比数 2高度的百分比是 父元素高度的百分比数。 2. rem
1rem 是永远获取 html 的 font-size 的值。 例html{font-size:100px;} 那么所有子元素 1rem 100px;
2通过 js 获取屏幕尺寸制定出一个系数去改变 html 的 font-size 值。 例当屏幕尺寸是 320px 我想设置 1rem 10%那么就设置 html 的 font-size:32px; 通过 js 来设置屏幕尺寸÷10 3. vwvh vwvh 永远跟随屏幕大小变化而变化。 1100vw 屏幕的宽度1vw 1% 屏幕尺寸 2这样更直观的获取百分比但是少部分手机不支持需要自己把控 vw 是为了的趋势。 3使用html{font-size: 100÷设计图宽度的1%vw;} 其他元素 header{height:高度÷100rem;}
/*假设设计图宽度为640px,某个div高度88px那么
640/6.4100px;
设100vw/6.4 15.625vw;
1rem/100 0.01rem * 88 1px *88 100px/100 1px
得 .88rem 88px;
*/html笔记一html4css2.0、css基础和属性、盒模型
html笔记二html4css2.0元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹
html笔记三html5css3html5、css3、文字相关
