CSS学习

浮动布局

float

清除浮动

使用clear属性清除浮动,我们比较少使用“clear:left;”或者“clear:right;”来判断是清除左浮动,还是清除右浮动。 我们往往直截了当地使用“clear:both;”来把所有浮动清除。

除了使用clear属性来清除浮动,还可以采用“overflow:hidden;”来清除浮动。

由于p元素清除了浮动,所以p元素的前一个元素产生的浮动就不会对后续元素产生影响,因此p元素的文本不会环绕在浮动元素的周围。

注解

对某个元素清除浮动,那么该元素的前一个元素产生的浮动不会对后续元素产生影响。

简明扼要,通俗易懂啊。

不知道是“温故知新”的原因,还是绿叶网讲得好。我以前看资料,不知道 clear 的功能。

定位布局

position

fixed

固定定位。

当元素的position属性设置为fixed时,这个元素就被固定了,被固定的元素不会随着滚动条的拖动而改变位置。 在视野中,固定定位的元素的位置是不会改变的。

top、bottom、left和right这4个属性不一定全部都用到。注意,这4个值的参考对象是浏览器的4条边。

relative

相对定位。

默认情况下,CSS相对定位元素的位置是相对于原始位置而言,而CSS固定定位元素的位置是相对浏览器而言!

absolute

绝对定位。

一个元素变成了绝对定位元素,这个元素就完全脱离正常文档流了,绝对定位元素的前面或者后面的元素会认为这个元素并不存在,即这个元素浮于其他元素上面,它是独立出来的。

相对定位,其他元素会认为这个元素还存在。

默认情况下,CSS固定定位元素和CSS绝对定位元素的位置是相对于浏览器而言,而CSS相对定位元素的位置是相对原始位置而言。

非默认情况下,absolute对元素A进行绝对定位的参照对象是A的第一个relative定位的父元素。absolute必须和relative结合使用。

注解

那么,固定定位和绝对定位的差别是什么?

块元素和行内元素

块元素

块元素的特点是:

(1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素;

(2)块元素内部可以容纳其他块元素或行元素;

常见块级元素:div、h1~h6、p、hr、ol、ul。

行内元素

行内元素的特点是:

(1)可以与其他行内元素位于同一行;

(2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果;

常见行内元素:strong、em、s、u、a、span、img、input。

min-width和width

CSS中width,min-width和max-width之间的联系:当三个属性都设置时,相当于取 Math.max(min-width, Math.min(width, max-width))

CSS3 word-break 属性

在恰当的断字点进行换行:

p.test {word-break:hyphenate;}

例如,<p class=”test”>This a very longlonglonglong words</p> ,文本超过 p 的长度,会截断一个单词换行。

注解

所以,我并没有发现这个属性有什么作用。

white-space 属性

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。没有 <br>,文字全部在一行显示。

pre-wrap 保留空白符序列,但是正常地进行换行。文字开头的空白字符会显示。

pre-line 合并空白符序列,但是保留换行符。文字开头的空白字符不会显示。

inherit 规定应该从父元素继承 white-space 属性的值。

图片垂直居中

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
        <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" />
</div>

设置两个属性:父元素的 line-heightimgvertical-align: middle;

消除span的默认间距

将span的父元素的font-size设置为0,在span中设置font-size。

overflow导致相邻元素塌陷

元素Element添加样式 overflow 后,在Elemennt的CSS中增加: vertical-align:top

css实现超出部分显示省略号

/* 显示一行,省略号 */

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;

/* 显示两行,省略号;下面的代码未验证,不知道是否正确*/

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

HTML

draggable 属性

draggable 属性规定元素是否可拖动。

提示: 链接和图像默认是可拖动的。

contenteditable 属性

可编辑段落:

<p contenteditable="true">这是一个可编辑段落。</p>

contenteditable 属性指定元素内容是否可编辑。

注意: 当元素中没有设置 contenteditable 属性时,元素将从父元素继承。

疑问

1.定位和float能一起使用吗?

2.使用了float后,该元素的margin熟悉还有效吗?position:absolute也有同样的疑问。

学习资料

CSS入门教程—绿叶学习网—极好的学习资料

http://www.lvyestudy.com/les_cj/css_list.aspx

mac 无法装在移动硬盘

https://www.cnblogs.com/kaffeetrinken/p/10596740.html

fsck_exfat -n -x /dev/rdisk2s1

SVG 教程

https://www.runoob.com/svg/svg-tutorial.html

SVG在线编辑器

https://c.runoob.com/more/svgeditor/

机器学习扫盲

https://www.w3school.com.cn/python/python_ml_getting_started.asp

学习CSS布局—很好的资料

http://zh.learnlayout.com/percent.html

react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

https://www.cnblogs.com/xiaoyan2017/p/11441285.html

react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

https://www.cnblogs.com/xiaoyan2017/p/11062316.html

Flutter中文网

https://flutterchina.club/

HTML5

canvas

可实现在线画板。svg也能实现这个功能。

保存canvas生成的图片

<html>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<head>
<script>
        window.onload = function() {
                draw();
                var saveButton = document.getElementById("saveImageBtn");
                bindButtonEvent(saveButton, "click", saveImageInfo);
                var dlButton = document.getElementById("downloadImageBtn");
                bindButtonEvent(dlButton, "click", saveAsLocalImage);
        };
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100);
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
                ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color
                ctx.fillText("Gloomyfish - Demo", 50, 50);
            }

            function bindButtonEvent(element, type, handler)
            {
                   if(element.addEventListener) {
                      element.addEventListener(type, handler, false);
                   } else {
                      element.attachEvent('on'+type, handler);
                   }
                        }

            function saveImageInfo ()
            {
                var mycanvas = document.getElementById("thecanvas");
                var image    = mycanvas.toDataURL("image/png");
                var w=window.open('about:blank','image from canvas');
                w.document.write("<img src='"+image+"' alt='from canvas'/>");
            }

            function saveAsLocalImage () {
                var myCanvas = document.getElementById("thecanvas");
                        // here is the most important part because if you dont replace you will get a DOM 18 exception.
                        // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");
                        var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                        window.location.href=image; // it will save locally
                }
        </script>
</head>
<body bgcolor="#E6E6FA">
        <div>
                <canvas width=200 height=200 id="thecanvas"></canvas>
                <button id="saveImageBtn">Save Image</button>
                <button id="downloadImageBtn">Download Image</button>
        </div>
</body>
</html>

关键语句:

mycanvas.toDataURL(“image/png”)

可查看效果的在线工具地址:

https://codepen.io/mudontire/pen/Kjmzzp

将画布(canvas)图像保存成本地图片的方法

https://www.webhek.com/post/save-canvas-to-image.html