css样式 | 易学教程

汇总css布局模型和常见代码缩写与长度单位

阅读更多关于汇总css布局模型和常见代码缩写与长度单位

知识点一：css布局模型：布局模型是建立在盒模型基础之上，在网页中，元素有三种布局模型：1.流动模型（Flow）2.浮动模型 (Float)3.层模型（Layer）。一、流动模型：默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的‘；特征1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，原因？默认状态下，块状元素的宽度都为100%，导致块状元素都会以行的形式占据位置。特征2.内联元素都会在所处的包含元素内从左到右水平分布显示。二、浮动模型：块状元素独占一行，如果想让两个块状元素并排显示，怎么办呢？通过浮动使元素脱离默认文档流。拓展阅读： float布局打破标准流,神助攻clear清浮动三、层布局模型：层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>流动模型、浮动模型</title> 6 <style type=

前端整理——css部分

阅读更多关于前端整理——css部分

（1）盒模型（普通盒模型、怪异盒模型） 1、元素的content（内容）、padding(内边距)、border（边框）、margin（外边距）构成了CSS盒模型 2、IE盒模型和W3C盒模型 1）IE盒模型是怪异模式下的盒模型，W3C盒模型是标准模式下的盒模型； 2）IE盒模型的width/height包含了content的width/heigh+padding+border W3C盒模型的width/height只是content的width/height 3、CSS3中的box-sizing 不同的人有不同的习惯，在css3中增加了box-sizing：content-box（遵循W3C盒模型）| border-box（遵循ie盒模型）|inherit（该属性的值从父元素继承）（2）如何让元素水平居中 1、绝对定位实现水平垂直居中： position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 注意： 1>对父元素要使用 position: relative; 对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。 2>如果只要垂直居中，可以不写right: 0；left: 0;

web前端01

阅读更多关于 web前端01

l W3C标准：结构（HTML描绘页面骨架），样式表现（CSS），行为（JS） l Html(超链接标记文本)，纯文本只能保存文本内容，音频视频都不能。 l 纯文本作为网页后缀html l 标签：用标签标记一级标题等。 <标签名（如：h1）> 标签有开始也有结束， <h1>this my firt web</h1>. l 根标签<\html>（一个页面只有一个根标签），所有内容均写到根标签里面 l 有两个子标签， <html><head></head><body></body></html> ,head body 兄弟标签 l 标准结构 <!doctype html> <html> <head> <meta character="utf-8" /> <title></title>(显示在网页的标题栏) </head> <body>  <h1>这是我的<font color="red"></h1> <h2> </h2> <h3> </h3> <p>楚河<br /> 汉界<br /> </p> </body> </html> l Head标签内容不显示在用户端，设置信息让浏览器看从而帮助浏览器解析 l Body显示用户页面中所有可见内容 l 不希望别人动可以写注释 l 超链接里的字就是tittle l <font></font> 设置字体

CSS样式表定义让文字自动适应Table宽度

阅读更多关于 CSS样式表定义让文字自动适应Table宽度

以下的例子是用样式实现，文字自动适应Table的宽度，并且超出的宽度的文字自动隐藏。IE下面还可以自动出现...的省略符号. 关键样式: table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla) text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE) overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla) white-space: nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 (For IE,Mozilla) 演示: HTML代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style> .ctl{ table-layout:fixed } .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px} </style> </HEAD> <BODY> <table cellSpacing="0" cellpadding="1" width=

关于CSS的技巧

阅读更多关于关于CSS的技巧

display显示与隐藏隐藏：display： none；显示：display：block；特性 :隐藏之后，不再保留位置（后者可以占据其位置） visibility visibility：visible；对象可见 visibility：hidden；对象隐藏 overflow英藏 overflow默认是visible，是没有隐藏的。通过overflow：hidden隐藏超出的部分总结 display：后面使用较多，可以下拉菜单。而且是不保留位置的 visibility：保留位置，使用较少 overflow：隐藏超出大小的部分，可以清除float。鼠标样式我们可以通过cursor来更改鼠标样式；其中move指的是：取消轮廓线：outline：none；取消文本域拖拽：resize：none；文字和图片垂直居中对齐：vertical-align：middle；让盒子文字不溢出三部曲：先强制一行内显示文本：white-space：nowrap；超出部分隐藏：overflow：hidden；文字超出部分用省略号代替超出部分text-overflow：elli psis；来源： CSDN 作者：东巴sama 链接： https://blog.csdn.net/qq_42376204/article/details/104667966

css排版常用样式、三种不同html类型、css布局盒模型介绍

阅读更多关于 css排版常用样式、三种不同html类型、css布局盒模型介绍

把CSS样式与网页编排通过网页排版中主要格式化要素实现网页实用性与欣赏性相结合，实现出设计效果。字体：div{font-family: "Microsoft Yahei";}为网页中的文字设置字体为微软雅黑,这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}注意：第一种方法比第二种方法兼容性更好一些。当然了如果你想用特殊字体怎么办了？通过css3的自定义字体实现@font-face{ font-family:dhnblog;src:url('images/fzm.ttf');}/*自定义字体类型*/ 字号、颜色：div.box{font-size: 14px;color: #f90;} 设置网页中文字的字号为14像素，并把字体颜色设置为#f90；此外颜色分为3种表现形式：a.rgb（255,255,255）b.英文单词c.16进制，如#f90，具体参考 css基本概念与css核心语法介绍中有关颜色介绍粗体：如果想为文字设置粗体除了使用h1-h6或strong标签

[Sass]Sass基础知识面试题

阅读更多关于 [Sass]Sass基础知识面试题

1、有多少种方法可以使用SASS？您可以使用三种不同的方式使用SASS: 作为命令行工具作为一个Ruby模块作为Rack启用框架的插件 2、SASS中的嵌套规则是什么？嵌套是不同逻辑结构的组合。使用SASS，我们可以将多个CSS规则相互组合。如果使用多个选择器，则可以在另一个选择器中使用一个选择器来创建复合选择器。 3、如何在SASS中引用父选择器？使用＆字符选择父级选择器。它告诉父选择器应该插入的位置。 4、如何在SASS中写入占位符选择器？ SASS使用 class 或 id 选择器支持占位符选择器。在正常CSS中，这些用“＃"或“。“指定，但在SASS中，它们替换为“％”。 5、列出SASS上的不同类型的运算符？有5种类型的运算符: 数字运算符颜色运算符字符串运算符布尔运算符列表运算符 6、什么是数字运算？它允许诸如加法，减法，乘法和除法的数学运算。 7、什么是彩色运算？它允许使用颜色分量和算术运算。 8、什么是列表运算？列表表示使用逗号或空格分隔的一系列值。 9、什么是布尔运算？您可以使用and、or和not（与或非）对Sass脚本执行布尔运算。 10、SASS中的括号是什么？括号是一对标记，通常用圆括号（）或方括号[]来标记，这提供了影响操作顺序的符号逻辑。 11、什么是SASS中的插值？它使用＃{}

学习前端开发，那你值得css的特点有哪些？

阅读更多关于学习前端开发，那你值得css的特点有哪些？

css（Cascading Style Sheets，层叠样式表），它是一种用来表现HTML或XML等文件样式的计算机语言，是用来表示html样式的一种编程语言，是可以做到网页和内容进行分离的一种样式语言。 CSS语言的特点 CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。总体来说，CSS具有以下特点：丰富的样式定义 CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。易于使用和修改 CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。多页面应用 CSS样式表可以单独存放在一个CSS文件中

webpack配置常用loader加载器

阅读更多关于 webpack配置常用loader加载器

　　webapck中使用loader的方法有三种　　使用loader之前必须运行安装 : npm install --save-dev xxx-loader 　　(1)通过CLI : 命令行中运行 webpack --module-bind jade --module-bind 'css=style!css' 　　　　//jade,style,css后面可省略-loader，他们分别对.jade使用jade-loader,对.css使用style-loader和css-loader 　　(2)通过require : require('style-loader!css-loader?module!./style/main.css') 　　　　//对main.css使用css-loader和style-loader加载,loader解析顺序是从右往左　　(3)通过配置webpack.config.js : 　　//在webpack.config.js插入modules属性;(1)rules中包含对象数组，每个对象中{test,use}test对应正则表达式,use包含多个所需loader，如只需一个loader可省去use，格式如:loader : 'xxx-loader' modules : { rules : [ {　　　　 test : /\.css/, use : [ {

css过渡的使用

阅读更多关于 css过渡的使用

过渡一，什么是过渡（transition）？ 1，transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。 2，可以在不使用 Flash 动画或 JavaScript 的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。二，常用属性； 1，transition 属性主要包含四个属性值： 1），用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）；当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果; 2），transition-duration -- 定义过渡效果花费的时间，默认是 0； 3），transition-timing-function -- 允许根据时间的推进去改变属性值的变换速率， transition-timing-function有6个可能值： a、ease：（逐渐变慢）默认值 b、linear：（匀速），linear c、ease-in：(加速) d、ease-out：（减速）， e、ease-in-out：（加速然后减速

订阅 css样式