CSS概念【记录】

HTML与CSS学习记录

title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML HTML指超文本标记语言,是构成网页文档的主要语言.我们常说的HTML指HTML4.01. XHTML指扩展的超文本标记语言,是XML风格的.更严格.更纯净的HTML. 两者的主要区别: XHTML标签必须闭合. XHTML标签和属性必须小写. XHTML标签属性必须加引号. XHTML标签用id属性代替n…

CSS概念 - 可视化格式模型（一）盒模型与外边距叠加

可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型可视化格式模型要掌握的3个最重要的CSS概念是浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形成CSS的基本布局. 主要学习内容: 盒模型的复杂性和特点如何以及为什么使用外边距绝对定位和相对定位之间的差异浮动和清理是如何工作的 1.盒模型概念盒模型是CSS的基石之一, 它指定元素如何显示以及(在某种程度上)如何相互交互. 页面上的每个元素被看做一个矩形框, 这个框由元素的内容. 内边距. 边框…

1.CSS语法 2.@规则 3.注释 4.层叠 5.优先级 6.继承 7.值 8.块格式化上下文 9.盒模型 10.层叠上下文 11.可替换元素 12.外边距合并 13.包含块 14.视觉格式化模型 15.布局模式 1.CSS语法属性:property 值:value CSS声明:property:value; CSS声明块:{ property:value; } CSS规则(CSS规则集):element{ property:value; } 2.@规则 @规则:一个CSS语句 @chars…

pure.css 学习记录

兼容性记录: IE 8+ Latest Stable: Firefox, Chrome, Safari iOS 6-8 Android 4.x 处理兼容性  <!--[…

CSS概念，引入，选择器

概念层叠样式表,定义如何显示HTML元素. 使用方式行内样式不推荐使用此方式结构和样式的杂糅会影响后期的维护 <p style="color: red">Hello world.</p> 内嵌样式表将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中 <head> <meta charset="UTF-8">…

css布局记录之双飞翼布局、圣杯布局

双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1…

CSS概念 - 可视化格式模型（二）定位概述（普通流、绝对定位）

2.定位概念上一节熟悉了盒模型, 现在来看一下可视化格式模型和定位模型. 理解这两个模型的细微差异是非常重要的, 因为它们一起控制着如何在页面上布置每个元素 2.1 可视化格式模型 CSS有三种基本的定位机制:普通流. 浮动.绝对定位. 除非专门指定, 否则所有框都在普通流中定位. 在普通流中元素框的位置由元素在HTML中的位置决定. p.h1或div等元素常被称为块级元素, 这意味着这些元素显示为一块内容, 即“块框”. 与之相反, a和span等元素被称为行内元素, 因为他们的内容显示在行…

RAID概念记录

之前对RAID概念有一些基本的认知,这次同事培训k8s 的持久卷,提到了RAID的一些概念和用法,记录一下. RAID ( Redundant Array of Independent Disks )即独立磁盘冗余阵列,通常简称为磁盘阵列. 与之对应的是JBOD ( Just a Bunch of Disks ),一组没有控制软件提供协调控制的磁盘集合. https://blog.csdn.net/ensp1/article/details/81318135 这文章将RAID的概念将的很清楚.…

vue等诸多概念记录

讲的很好,转载记录下,转载自: https://www.cnblogs.com/taowd/p/11808710.html vue学习笔记-遗留问题记录 Node.js是什么?对node.js的理解官网解释:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时. 这是一种通过JavaScript语言开发web服务端的东西 Node 是一个服务器程序.但是,基础 Node 产品肯定不像 Apache 或 Tomcat node.js有非阻塞,事件驱动I/O等特性…

CSS字体记录

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaYAAACnCAIAAADVOG9FAAAgAElEQVR4nOy9eXwcxZk/vL/9ve8eb7KbkHPZ3VwbkmwCm00gIUBIuAmHD2mOvubSYcm3fAG2weYO5jCHsaXpruqWZMsGLC4jaaa7qnskGwg+sKQ5JBtrpntka7p7ZHMEG0iA3dX7R3ePRpYty/YY77LW5/k8n+pSTdVT3+epp5+qrq7+i5Fzf+f+z…

CSS 概念 & 作用

http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html 式样定义如何显示 HTML内容通常存储在式样表中作用 : 解决内容与表现分离的问题 ( MVC 模型 , model : html , view : css , control : JavaScript ) 外部式样表可以极大的提高效率 , 例如要修改网页中标题的表现形式 , 如果网页中有100个标题, 如果使用HTML进行修改, 则需要修改100次, 如果…

css学习记录

1 !important 表示此属性需要优先考虑: <head> <title>Page Title</title> <style type="text/css"> a { color: black !important; <----优先属性 } </style></head><body> <a style="…

css一些记录

比如右侧链接:更多 ,定义此span float:right ,但是更多要写在短标题的左边比如:<span>更多</span> <font>这是短标题</font> CSS开头 body{ padding:0px; margin:0 auto; width:992px; font-size:12px; color:#000000; background-color:#540350;}a{color:#fff; text-decoration…

css 样式记录

/* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 5px; border-radius: 5px;} /* Handle */::-webkit-scrollbar-thumb { -webkit-border-radius:5px; border-radius: 6px; background: rgba(158, 79…

css兼容性记录

* , ie6,ie7可以识别: _和- , ie6可以识别: !important ,表示高优先级,ie7及以上,firefox都支持,ie6认识带!important的样式属性,但不认识!important的优先级: -webkit- ,针对safari,chrome浏览器的内核CSS写法 -moz-,针对firefox浏览器的内核CSS写法 -ms-,针对ie内核的CSS写法 -o-,针对Opera内核的CSS写法…

常用css属性记录

CSS常用属性: 字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位:PX.PD.EM粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体 font-variant: small-…

正确认识 DIV+CSS 概念

今天看到神采飞扬发表于前端观察的<DIV+CSS 请不要再忽悠人了>,讲的挺有深意的,尤其对于新手如何正确认识div,学习web标准,使用web标准建站应该有很大帮助.转载过来,共同分享. 在大约两年前,DIV+CSS是一对很诱人的组合,会用DIV+CSS制作网页的人,常常会被人赞以大拇指的,记得06年初的时候,我用div+css布局的一个纯静态网站还拿了学校网页设计比赛的一个奖. 今天,尽管提到DIV+CSS,还会有很多人热情高涨,但是我会对他摇头了:DIV+CSS不是一切,更不是某些人所谓…

前端css学习记录

参考资料:CSS权威指南(第三版)中文版核心要点: HTML负责标记文档的结构(HyperText Markup Language),结构化语言. CSS 负责表现文档的样式(Cascading Style Sheets),样式语言. 思考:html可能被xml取代,之前遇到过一个项目,使用xml显示文本的内容,xml内容经过特定的阅读器读取,会变成一个类似于word类型的文档.文档的内容大部分是一些表格的东西,可以打印出来.负责显示的程序就是一种类似与css解析器的东西.还有一些东西也是这样…

css 实践记录

子绝父相 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position 利用子绝父相来实现一种比较老的居中方式:1.明确宽度:2.定位左边到容器的中间位置:3.margin-left负值来左移元素的一半,实现元素容器居中 <style> .container{ position: relative; } .item{ position: absolute; background-color: #0F9E5E; display: inline…

网页前端之CSS学习记录总结篇

标签: 块级标签block:div, p, h1-h6, ul, ol,li, dl, dt, dd,table,tr等,独占一行,可以设置宽高,默认是父标签的100%:行内标签inline:a,span ,strong,i,u,em等,在一行内显示,不可以设置宽高,默认是字体的大小:p标签自带边距margin 16px:body是8px;display将标签转化为行内或者块级标签:行内块标签inline-block:在一行显示,可以设置宽高,如input,image,textarea,td标签…

CSS代码记录

1. 内容横向滚动的代码 .ul { display: box; display: -webkit-box; width: 250px; background: yellow; overflow-y: hidden; overflow-x:auto; } .li { flex-shrink:; -webkit-flex-shrink:; width: 100px; height: 50px; background: red; margin-right: 5px; } <div class="…

CSS 概念 Block Inline Containing block

html css一些记录

1.忽略将页面中的数字识别为电话号码 <meta content="telephone=no" name="format-detection" /> 2.去掉点击元素会出现蓝框 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 3.事件问题移动端的常用事件:touchstart,touchmove,touchend. 很多时候我们需要在浏览器里测试.所以兼容的写法是: isTouch = !!na…

【笔记】《通俗详细地讲解什么是P和NP问题》的概念记录

1问题规模: 要计算或解决一个问题,该问题通常有一个大小规模,用n表示. 2算法的时间复杂度计算次数与n的关系函数.(因为计算次数隐含时间). 3多项式时间复杂度所有形如a*n^k+b*n^(k-1)+c*n^(k-2)……都可记为O(n^k), n^k表示n的k次方,*为乘号,这样的复杂度称为多项式时间复杂度. 4指数时间复杂度若是时间复杂度形如k^n,k为大于1的常数,或n!,或更大的,就称为指数型时间复杂度.显然,当n足够大时,指数型时间比多项式要大得多的多. 5 P问题能用多项式…

常用的 css 样式记录

1.font-style 属性指定文本的字体样式. 对应的值有: normal 默认值.浏览器显示一个标准的字体样式; italic 浏览器会显示一个斜体的字体样式; oblique 浏览器会显示一个倾斜的字体样式: inherit 规定应该从父元素继承字体样式. 2.vertical-align 属性设置一个元素的垂直对齐.(如:垂直对齐图像) 例如:vertical-align: 4px; 对应的值有: length baseline 默认.元素放置在父元素的基线上…

css样式记录

样式一 #sideBar,#blog_post_info_block { display: none; } #under_post_news { display: none; } /*评论框大小*/ #tbCommentBody.comment_textarea{ width:890px; } /*尾部间距*/ #footer { text-align:center; border-top:2px solid #2F4F4F; margin-left:25px; margin-right:25p…