css零零散散的笔记】的更多相关文章

1.div根据内容自适应大小 效果图: html: <body> <div class="parent"> <div class="children">欢迎来到蚂蚁部落,今天阳光不错!</div> </div> </body> css: <style media="screen"> .parent { width: 400px; height: 400px; bo…
CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background:white; background-clip:padding-box; ①  hsla:h是色调,取值范围是0-360.s是饱和度,取值范围是0%-100%.l是亮度,取值范围是0%-100%.a是透明度,取值范围是0-1. ② background-clip:用于调整背景图的显示区域,有3个值,b…
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="child"> hello world ! </div> </div> </body> 方法一:inline-block + text-align <style type="text/css"> body{ margin: 0px;…
前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性转化为网页中的各种创意.这正是这本书将要呈现的内容.--引用自前言 ①DRY 是 Don't Repeat Yourself 的首字母缩写,意思是不应该重复你已经做过的事.它是一种广为流传的编程理念,旨在提升代码某方面的可维护性:在改变某个参数时,做到只改尽量少的地方,最好是一处.强调 CSS 代码…
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词内换行(word-break)也会发生. text-overflow : clip | ellipsis取值:clip:    不显示省略标记(...),而是简单的裁切.ellipsis:    当对象内文本溢出时显示省略标记(...) text-shadow : none | <length>…
Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 背景位置: 1.如果只设置一个方位词,另外一个默认居中 2.如果设置的值是两个方位词,与顺序无关 2 数值:背景位置: 1.如果设置的值是数字: 1.一个值得时候,表示水平方向的位移,垂直方向默认居中 2.两个值得时候,第一个表示水平位移 第二个表示垂直方向的位移 C 背景图片是否平铺:backg…
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面——也就是留下一个符合该值的图片位置): 2.获取一个图像的所有信息,包括内容.大小.及其分辨率:width-2值和height-2值(如果获取图像信息失败,则每个浏览器有每个浏览器的不同处理办法,比如加载一个破损的图片示意——但无论是什么浏览器,此时如果<img>中有alt值,则加载该值替代图片…
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin/border/padding/content而已,再多无非在不同box-sizing下的表现不同而已:但是书中记录的替换元素与非替换元素.content的一些用法.margin合并等等,让我对"盒模型四大家族"有了全新的认识 一.替换元素与非替换元素 根据"外在盒子"…
零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年~  知耻而后勇,从基础拾起~ 所以我写这一系列笔记~…
选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解,底下的css笔记会详细介绍不同的选择器~ <!DOCTYPE html> <html lang="en"> <head> <link href="index.css"> <meta charset="UTF…