CSS3怪异盒&弹性盒布局 1. 怪异盒模型box-sizing 属性,可以设置标准盒模型或怪异盒模型。子元素样式 content-box,属性值,标准盒模型 border-box, 属性值,怪异盒模型,为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 示例: 1234567891 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #怪异盒模型 #弹性盒布局
CSS3选择器 参考资料: 一套企业级UI设计语言和React组件库:https://gitee.com/ant-design/ant-design 同上:https://ant-design.gitee.io/ 1. CSS3基础CSS3完全向下兼容,网络浏览器也还将继续支持CSS2。 CSS3主要的影响是将可以使用新的可用的选择器和属性,这些会允许实现新的设计效果,比如动态和渐变,而且可以很简单的设计处 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #选择器
CSS三栏自适应布局集锦 参考资料: 源码地址: https://github.com/jzplp/CSS-Layout 布局实例网站: https://jzplp.github.io/CSS-Layout/ 1.直接设置宽度直接设置元素宽度,可以说是最简单也最直接的实现方式了。只要保证元素相加的之后正好为100%,即可实现占满整个页面。假设有的元素是按照像素设置宽度,有的是按照比例设置宽度,那么如何使其相加为100% 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3
CSS定位布局 1. position 定位position 定位,需要结合偏移位置(top/left/right/bottom)使用。有 6 个取值。 6 postion: inherit; 从其父元素继承此属性。 12345position 偏移位置属性:top:100px;left:100px;right:100px;bottom:100px; 1.1 绝对与相对定位 2017-04-28 04_大前端 > 02_CSS #CSS #定位 #布局
CSS基础入门 1. 什么是CSSCSS,Cascading Style Sheets 层叠样式表。 即:如何修饰网页信息的显示样式。 目前推荐遵循的是 W3C 发布的 CSS3.0(1998年5月21日W3C推出了CSS2.0),用来表现XHTML或者XML等样式文件的计算机语言。 2. CSS语法 每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值 属性必须放在花括号{} 2017-04-28 04_大前端 > 02_CSS #CSS #选择器
CSS属性,CSS盒子 1. CSS 样式属性1.1 字体 font-xxx定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。 font 简写属性。作用是把所有针对字体的属性设置在一个声明中。eg:font:oblique 700 30px “黑体”; /* 样式 加粗 大小 风格 */ font-family 设置字体系列。 font-size 设置字体的尺寸。 font-s 2017-04-28 04_大前端 > 02_CSS #CSS #属性
Sass教程 参考资料: sass官网:https://sass-lang.com.cn/ sass教程:https://sass-lang.com.cn/documentation/ 1. 介绍sass最成熟、最稳定、最强大的专业级css扩展语言 sass是css的预编译工具 更优雅的书写css 需要转换成css才能让浏览器认识和运行 安装一个插件:Easy Sass 可以自动将.scss的样式代 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #sass
使用方式,CSS选择器 1. CSS 样式使用方式1.1 内联方式标签内,单独对特定标签元素生效,简单,但不能复用。 1<font style="color: red;">这是一行字</font> 1.2 内部方式 在 head 标签中,使用 style 标签 使用选择器选中元素 编写 css 代码 12345678<style type="text/css& 2017-04-28 04_大前端 > 02_CSS #CSS #选择器
CSS样式案例集锦 布局两栏布局123456789101112131415161718192021222324252627282930313233<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3
关键帧动画&3D 参考资料: 动画库:https://www.dowebok.com/ animatecss动画库效果和使用方法:https://animatecss.node.org.cn/ 同上:https://animate.style/ github地址:https://github.com/animate-css/animate.css css动画库cdn:https://cdnjs.clou 2017-04-28 04_大前端 > 02_CSS #CSS #CSS3 #关键帧动画 #3D