git学习笔记
1、配置用户名和邮箱1234567配置用户名和邮箱git config --global user.email "you@example.com"git config --global user.name "Your Name" PS:以上信息在本地仓库中仅仅记录信息,不需要真实存在查看配置信息git config --global user.namegit config --global user.email
2、获取本地仓库12git init 初始化当前的目录为一个git仓库(该本地仓库仅存在当前目录!!!)ll -a 初始化后当前目录会多一个.git文件夹,-a可以显示隐藏文件
3、创建完成一个文件后,变为untracked未跟踪状态12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879801. ...
相邻块元素垂直外边距合并
清除元素的默认内外边距👇👇
行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。
12padding:0; /* 清除内边距 */margin:0; /* 清除外边距 */
使用margin定义块元素的「垂直外边距」时,可能会出现外边距的合并。
(1). 相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
「取两个值中的较大者」这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
「解决方案:尽量给只给一个盒子添加margin值」。
(2). 嵌套块元素垂直外边距的合并(塌陷)
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者
「解决方案:」
可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow: hidden。
...
无题
清除浮动的方法
1选择器 { clear: 属性值; } clear 清除
属性值
描述
left
不允许左侧有浮动元素(清除左侧浮动的影响)
right
不允许右侧有浮动元素(清除右侧浮动的影响)
both
同时清除左右两侧浮动的影响
实际工作中,几乎只用clear: both
1).额外标签法(隔墙法,W3C推荐的做法)
通过在浮动元素末尾添加一个空的标签,阻挡后面的浮动标签,例如 ,或则其他标签br等亦可。
墙必须是块级元素,不能是行内元素。
阻挡后父盒子有高度,孩子有多高则高度为多少。
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差。
2).父级添加overflow属性方法
1可以给父级添加: overflow为 hidden| auto| scroll 都可以实现。
优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
3).使用after伪元素清除浮动:after 方式为空元素额外标签法的升级版,给父标签添加,好处 ...
无题
CSS 提供了3种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:
A. 普通流(标准流)
块级元素会独占一行,从上向下顺序排列;
常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;
常用元素:span、a、i、em等
B. 浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示,而且不会有空白缝隙,分别靠左靠右对齐。
可以改变标签的默认排列方式
最初是为了使文字环绕图片的效果,所以和浮动图片和文字在一起时,不会压住文字内容,而会使文字环绕图片。
C. 定位
将盒子定在浏览器的某一个位置——CSS 离不开定位,特别是后面的 js 特效。
浮动1选择器 { float: 属性值; }
属性值
描述
none
元素不浮动(默认值)
left
元素向左浮动
right
元素向右浮动
浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流,因为前面的标准流自己占一个位置。**建议:**如果一个盒 ...
无题
定位「1. 定位详解」
将盒子「定」在某一个「位」置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。
所以,我们脑海应该有三种布局机制的上下顺序👇👇标准流在最底层 (海底) ——- 浮动 的盒子 在 中间层 (海面) ——- 定位的盒子 在 最上层 (天空)
定位是用来布局的,它有两部分组成:定位 = 定位模式 + 边偏移
在 CSS 中,通过 top、bottom、left 和 right 属性定义元素的「边偏移」:(方位名词)
边偏移属性
示例
描述
top
top: 80px
「顶端」偏移量,定义元素相对于其父元素「上边线的距离」。
bottom
bottom: 80px
「底部」偏移量,定义元素相对于其父元素「下边线的距离」。
left
left: 80px
「左侧」偏移量,定义元素相对于其父元素「左边线的距离」。
right
right: 80px
「右侧」偏移量,定义元素相对于其父元素「右边线的距离」
「2. 定位模式(position)」在 CSS 中,通过 position 属性定义元素的「定位模式」,语法如下:
1选择 ...
无题
圆角边框border-radius: length;
border-top-left-radius 定义了左上角的弧度border-top-right-radius 定义了右上角的弧度border-bottom-right-radius 定义了右下角的弧度border-bottom-left-radius 定义了左下角的弧度
border-radius: 左上角 右上角 右下角 左下角;
四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
一个值:四个圆角值相同
其中每一个值可以为 数值或百分比的形式。
技巧:让一个正方形 变成圆圈,圆角矩形也同理。
1border-radius: 50%; /*或者是正方形的边长一半*/
盒子阴影(box-shadow)阴影不占用空间,不影响其他盒子排列
1box-shadow: offset-x offset-y [blur [spread]] [color] [ins ...
无题
元素的显示与隐藏1.1 display 显示(重点)display设置或检索对象是否显示或如何显示。
display: none 隐藏对象
特点:隐藏之后,**不再保留位置。**
display: block 除了转换为块级元素之外,同时还有显示元素的意思。
实际开发场景:配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛
1234567.mask { display:none;}.box:hover .mask { display:block;}当鼠标放到box上时候,则显示隐藏的mask遮罩元素
1.2 visibility 可见性设置或检索是否显示对象
123visibility:visible ; 对象可视visibility:hidden; 对象隐藏
特点:隐藏之后,继续保留原有位置。
1.3 overflow 溢出检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
属性值
描述
visible
不剪切内容也不添加滚动条
hidden
...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
无题
CSS三大特性一、层叠性 样式冲突,遵循就近原则,执行样式离结构近的
样式不冲突则不层叠
二、继承性子标签会继承父标签的某些样式,如文本颜色和字号
1234567div { color: red;}<div> <p>继承div的样式,变为红色</p></div>
恰当使用继承可以简化代码,降低CSS的复杂性
子元素可以继承父元素的样式 (text-,font-,line-等开头的元素可以继承,以及color属性)
1234567891011121314151617body { font: 12px/24px; 12为字号,24为行高 font: 12px/1.5; /*不跟单位时候,1.5则表示子元素div的行高*1.5倍,即10*1.5px=15px*/ 行高使用倍数方便子元素根据字体大小自动调整行高}div { font-size: 10px;}<body> <div>继承bod ...
Bootstrap学习笔记
Bootstrap学习笔记一、栅格系统通过一系列的行(row)与列(column)的组合来创建页面布局,按照不同尺寸屏幕分为1~12份
超小屏幕手机 (<768px)
小屏幕平板 (≥768px)
中等屏幕桌面 (≥992px)
大屏幕桌面 (≥1200px)
.container最大宽度
自动(100%)
750px
970px
1170px
类前缀
.col-xs-
.col-sm-
.col-md-
.col-lg-
列数(column)
12
按照不同屏幕划分为1~12等份
行(row)可以去除父容器作用12px的边距
xs:extra small
列大于12,多余的列所在的元素将被作为一个整体另起一行
每一列默认有左右15px的padding,因此内容互相间隔30px左右
不能再加margin值,否则会挤掉盒子
可以同时为一列指定多个设备的类名,一遍划分不同份数,例如
二、列嵌套一个列(row)内再分为12等份。可以通过添加一个新的.row元素和一系列.col-sm-元素到已经存在的.col-sm-元素内。
嵌套可以像下面多 ...